Vue进阶(幺陆玖)项目部署后IE报 SCRIPT1002:语法错误 解决方案探讨

文章目录

    • 一、前言
    • 二、组件懒加载
      • 2.1 什么是懒加载
      • 2.2 如何实现懒加载
    • 三、延伸阅读 软件程序唤醒
      • 3.1 protocolCheck 实现
      • 3.2 自定义实现
    • 四、拓展阅读

一、前言

Vue项目改造升级后,原本本地热部署后IE可正常打开的项目出现页面白屏且控制台给出SCRIPT1002:语法错误的提示信息。

经过代码排查,发现项目中新引入了一些依赖包导致系统无法正常启动。

出现以上错误,可从以下几个方面查找原因:

  1. 可能与IE的某些插件冲突。把所有无关的IE加载项全部禁用后尝试;

  2. 引用了不存在的 js 文件;

  3. 页面的某些文件在文档模型还没建立时就已经开始引用相关的节点;

令人感到疑惑的是:其他原本可以本地IE热部署的项目在进行同样的升级改造后,依旧可以实现本地IE部署,且没有任何错误信息。故需要通过对比2个项目间的差异性着手进行分析。初步怀疑与webpackbabel版本有关。

经过仔细排查,发现报错前面给出了polyfill-eventsource added missing EventSource to window 的提示信息,但是通过配置webpack.base.config.js中加载babel-loader并未生效。

白屏错误发生前后项目区别是引入了新的js文件,故考虑采用动态引入方式引入相应js依赖文件。可根据系统类型动态引入js文件。

// 获取系统标识
let platform = navigator.platform
// 若为Windows OS
if (platform === 'Win32') {// TODO 执行存量代码逻辑
} else {import('./test.js').then(res => {this.test = res// TODO 执行新线代码逻辑})
}

或者通过以下方式:

// async await 的方式
const addJs = async ( )=>{await import ('xxx.js')
}

以上方案适用于在存量自定义组件中实现,对于新定义自定义组件,可考虑通过组件懒加载实现。

<template><div><span>it is router a</span><br><br><component-a></component-a></div>
</template><script>export default {name: "router-a",components: {componentA: resolve => require(['./componentA.vue'], resolve)}};
</script><style scoped></style>

二、组件懒加载

随着Web应用程序的日益复杂,前端开发人员需要在保证页面加载速度的前提下更好地提供功能和用户体验。这就涉及到Vue组件的懒加载和预加载,它们是优化Vue应用程序性能的重要手段。

2.1 什么是懒加载

懒加载就是当用户需要访问某个组件时才会把该组件的代码加载进来,而不是一开始就把所有组件的代码都加载进来,这样可以减少初始加载的时间,提高页面的响应速度。

Vue提供了一个异步组件(async component)的概念,用于处理懒加载。

2.2 如何实现懒加载

可采用以下方式实现组件懒加载:

  1. 使用 import() 动态导入组件

    Vue 2.4.0以上版本支持使用import()方法来动态导入组件。

    例如,定义一个异步组件,这个组件在需要的时候才会被加载进来:

    Vue.component('my-component', () => import('./MyComponent.vue'));
    
  2. 使用 webpackrequire.ensure()

如果Vue项目使用webpack作为构建工具,那么可以使用webpack提供的require.ensure()方法来实现组件懒加载,不过这种方式已经不被推荐使用了。

例如,可以这样定义一个异步组件:

Vue.component('my-component', resolve => {require.ensure(['./MyComponent.vue'], () => {resolve(require('./MyComponent.vue'))})
});

三、延伸阅读 软件程序唤醒

Vue 如何实现pc端检测本地电脑是否安装某应用,安装则打开反之则下载?

3.1 protocolCheck 实现

vue可通过使用protocolCheck实现以上功能。 protocolcheck.js 主要功能是检测电脑注册表中已注册的exe软件程序是否唤醒成功。

语法格式如下:

window.protocolCheck(openUrl, () => {alert('检测到未安装客户端,请确认是否下载?')});
  • openUrl:是要打开的软件的路径,比如打开 weixin:// qq://

第二个参数是检测电脑中是否安装了要打开的程序 如果不是则执行回调函数中的内容。

vue中使用protocolCheck需要全局引入需要全局引入。 具体操作步骤如下:

  1. protocolcheck.js文件放在 static 文件夹下,并在index.html中引入上面的js。由于 protocolcheck.js不能通过es6import方式引入,所以只能挂载在全局的window上。

在这里插入图片描述

  1. 在页面中应用,因为已经把protocolcheck挂载至window上。应用示例如下:
window.protocolCheck('u3d://',(fail) => {console.log('fail', fail)// 没有安装 弹窗显示 引导去下载this.dialogshiyan = true;},(succ) => {// 安装则直接打开console.log('succ', succ)}
)

注意⚠️:window.protocolCheck方法只能打开电脑注册表中已注册的软件。

3.2 自定义实现

import { openUrlWithInputTimeoutHack } from '@/utils/arouse'
openUrlWithInputTimeoutHack('weixin:\\', () => {console.log('未安装');window.location.href = 'xxx软件下载路径'
}, () => {console.log('已安装,自动唤起');
})

arouse文件点击下载

四、拓展阅读

  • 《Vue进阶(幺陆玖)信创终端适配改造》
  • 《protocolcheck.js》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/172362.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TensorFlow图像多标签分类实例

接下来&#xff0c;我们将从零开始讲解一个基于TensorFlow的图像多标签分类实例&#xff0c;这里以图片验证码为例进行讲解。 在我们访问某个网站的时候&#xff0c;经常会遇到图片验证码。图片验证码的主要目的是区分爬虫程序和人类&#xff0c;并将爬虫程序阻挡在外。 下面…

【微信小程序】实现投票功能(附源码)

一、Vant Weapp介绍 Vant Weapp 是一个基于微信小程序的组件库&#xff0c;它提供了丰富的 UI 组件和交互功能&#xff0c;能够帮助开发者快速构建出现代化的小程序应用。Vant Weapp 的设计理念注重简洁、易用和高效&#xff0c;同时提供灵活的定制化选项&#xff0c;以满足开发…

如何使用gpt提高效率

如何使用gpt提高效率 自动化替代人力工作减少创意工作需求技术依赖风险实际应用领域内容生成自动回答问题自动化编程个性化推荐 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客&#x1f466;&#x1f3fb; 《java 面试题大全》 &#x1f369;惟余辈才疏学浅&…

[量化投资-学习笔记002]Python+TDengine从零开始搭建量化分析平台-MA均线的多种实现方式

MA 均线时最基本的技术指标&#xff0c;也是最简单&#xff0c;最不常用的&#xff08;通常使用EMA、SMA&#xff09;。 以下用两种不同的计算方法和两种不同的画图方法进行展示和说明。 MA 均线指标公式 MA (N)(C1 C2 C3 …C N )/N目录 方式一1.SQL 直接查询均值2.使用 pyp…

Unity游戏开发中打造游戏攻击技能架构与设计

一、技能系统的设计 在 MOBA 游戏中&#xff0c;每个英雄角色都会有多个技能&#xff0c;这些技能可以分为普通攻击和技能攻击两种。普通攻击是英雄角色的基本攻击方式&#xff0c;而技能攻击则需要消耗一定的资源&#xff08;如蓝量&#xff09;才能使用。在设计技能系统时&a…

TensorFlow学习:使用官方模型和自己的训练数据进行图片分类

前言 教程来源&#xff1a;清华大佬重讲机器视觉&#xff01;TensorFlowOpencv&#xff1a;深度学习机器视觉图像处理实战教程&#xff0c;物体检测/缺陷检测/图像识别 注&#xff1a; 这个教程与官网教程有些区别&#xff0c;教程里的api比较旧&#xff0c;核心思想是没有变…

GoLong的学习之路(八)语法之Map

文章目录 Map初始化方式判断某个键是否存在map的遍历对value值遍历。对key值遍历 使用delete()函数删除键值对按照指定顺序遍历map元素为map的切片值为切片类型的map 做个题吧 Map 哈希表是一种巧妙并且实用的数据结构。它是一个无序的key/value对的集合&#xff0c;其中所有的…

Python环境下LaTeX数学公式转图像方案调研与探讨

目录 引言方案一&#xff1a;基于LaTeX环境方案二&#xff1a;基于KaTeX(推荐) 方案三&#xff1a;基于Matplotlib写在最后 引言 近来&#xff0c;涉及到一些公式识别的项目&#xff0c;输入是公式的图像&#xff0c;输出是LaTeX格式的数学公式字符串。 这类项目一般都采用深…

Powershell脚本自动备份dhcp数据库

文章目录 为什么要备份DHCP数据库呢&#xff1f;在PowerShell中自动备份DHCP数据库1&#xff0c;创建备份目录2&#xff0c;判断备份路径是否存在3&#xff0c;备份DHCP数据库4&#xff0c;完整自动备份脚本5&#xff0c;安排定期备份 推荐阅读 为什么要备份DHCP数据库呢&#…

国密 SM2 SSL 证书 Nginx 安装指南 linux版

一、获取国密证书 1、在您完成申请西部GDCA服务器证书的流程后&#xff0c;下载证书将获取一个证书包&#xff0c;有以下 *.***.com_sign.crt&#xff1a;签名证书 *.***.com_sign.key&#xff1a;签名证书私钥 *.***.com_encrypt.crt&#xff1a;加密证书 *.***.com_encr…

基于鸡群算法的无人机航迹规划-附代码

基于鸡群算法的无人机航迹规划 文章目录 基于鸡群算法的无人机航迹规划1.鸡群搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用鸡群算法来优化无人机航迹规划。 1.鸡群搜索算法 …

红队专题-从零开始VC++C/S远程控制软件RAT-MFC-远控介绍及界面编写

红队专题 招募六边形战士队员[1]远控介绍及界面编写1.远程控制软件演示及教程简要说明主程序可执行程序 服务端生成器主机上线服务端程序 和 服务文件管理CMD进程服务自启动主程序主对话框操作菜单列表框配置信息 多线程操作非模式对话框 2.环境&#xff1a;3.界面编程新建项目…

JavaScript_Pig Game切换当前玩家

const current0El document.getElementById(current--0); const current1El document.getElementById(current--1); if (dice ! 1) {currentScore dice;current0El.textContent currentScore;} else {} });这是我们上个文章写的代码&#xff0c;这个代码明显是有问题的&…

[量化投资-学习笔记003]Python+TDengine从零开始搭建量化分析平台-Grafana画K线图

在前面两个笔记&#xff1a; PythonTDengine从零开始搭建量化分析平台-数据存储 PythonTDengine从零开始搭建量化分析平台-MA均线的多种实现方式 中有提到使用 Grafana 画图&#xff0c;不过画的都是均线。除了均线&#xff0c;Grafana 非常人性的提供了 K线图模块 搭配 TDeng…

VScode 调试 linux内核

VScode 调试 linux内核 这里调试的 linux 内核是通过 LinuxSD卡(rootfs)运行的内核 gdb 命令行调试 编辑 /home/tyustli/.gdbinit 文件&#xff0c;参考 【GDB】 .gdbinit 文件 set auto-load safe-path /home/tyustli/code/open_source/kernel/linux-6.5.7/.gdbinit在 lin…

Cross Site Scripting (XSS)

攻击者会给网站发送可疑的脚本&#xff0c;可以获取浏览器保存的网站cookie&#xff0c; session tokens, 或者其他敏感的信息&#xff0c;甚至可以重写HTML页面的内容。 背景 XSS漏洞有不同类型&#xff0c;最开始发现的是存储型XSS和反射型XSS&#xff0c;2005&#xff0c;Am…

Linux中shell脚本中的运算

目录 一、运算符号 二、运算指令 三、练习 一、运算符号 加法-减法*乘法/除法%除法后的余数**乘方自加一--自减一 <小于<小于等于>大于>大于等于等于ji&#xff0c;jji*jj*i/jj/i%jj%i 二、运算指令 (()) ##((a12)) let ##let a12 expr ##expr 1 2 …

【数据结构】交换排序

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈数据结构 &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 冒泡、快速排序 1. 冒泡排序2. 快速…

城市群(Megalopolis)/城际(inter-city)OD相关研究即Open Access数据集调研

文章目录 1 城市群/城际OD定义2 理论模型与分析方法2.1 重力模型 Gravity Model2.2 干预机会模型 Intervening Opportunities Model2.3 辐射模型 Radiation Model 3 Issues related to OD flows3.1 OD Prediction3.2 OD Forecasting3.3 OD Construction3.4 OD Estimation 4 OD …

基于单片机的智能电子鼻的设计

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 技术交流认准下方 CSDN 官方提供的联系方式 文章目录 概要 一、智能电子鼻系统的设计方案1.1智能电子鼻系统的设计思路1.2智能电子鼻系统的设计流程图1.3智能电子鼻系统的硬件数…