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

一、前言

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

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

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

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

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

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

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

经过仔细排查，发现报错前面给出了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 执行新线代码逻辑
	})
}
1
2
3
4
5
6
7
8
9
10
11

或者通过以下方式：

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

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

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

二、组件懒加载

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

2.1 什么是懒加载

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

Vue提供了一个异步组件（async component）的概念，用于处理懒加载。

2.2 如何实现懒加载

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

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

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

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

   Vue.component('my-component', () => import('./MyComponent.vue'));
   1

2. 使用 webpack 的 require.ensure()

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

例如，可以这样定义一个异步组件：

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

三、ES6代码转ES5代码

其实白屏的真正原因应该是项目代码中涉及ES6+等高阶语法，运行在IE中无法正常解析，导致页面白屏问题发生。那么解决思路就是如何实现IE运行时能够解析ES6+等高阶语法。一种处理方案是通过应用babel实现es6+的语法降级。具体实现方式为在.babelrc文件中配置相关转码规则。

{
	"presets": [
		"es2015"
	]
}
1
2
3
4
5

注⚠️：需执行npm install -D babel-preset-es2015安装相应的依赖包。

若配置后问题依旧存在，可以使用手工方式将es6+降级为es5。实现方式为：

1. 初始化转码项目

vue init webpack Es6ToEs5
1

2. 安装转码工具

npm install -g babel-cli 
npm install --save -dev babel-cli babel-preset-latest
npm install -g babel-preset-latest
1
2
3

3. .babelrc文件维护以下内容， 代表我们需要的是最新的转换规则。

{
    "presets":["latest"]
}，
1
2
3

4. 在集成终端中打开项目文件夹，输入命令：

babel signalr.js  --out-file signalr_es5.js
1

可以看到目录下生成转为ES5代码之后的文件。

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

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

4.1 protocolCheck 实现

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

语法格式如下：

window.protocolCheck(openUrl, () => {
   alert('检测到未安装客户端，请确认是否下载?')
 });
1
2
3

• openUrl：是要打开的软件的路径，比如打开 weixin:// qq://

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

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

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

2. 在页面中应用，因为已经把protocolcheck挂载至window上。应用示例如下：

window.protocolCheck(
   'u3d://',
   (fail) => {
     console.log('fail', fail)
     // 没有安装 弹窗显示 引导去下载
    this.dialogshiyan = true;
   },
   (succ) => {
     // 安装则直接打开
     console.log('succ', succ)
   }
)
1
2
3
4
5
6
7
8
9
10
11
12

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

4.2 自定义实现

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

arouse文件点击下载

五、延伸阅读 前端npm install 报错PhantomJS not found on PATH

Vue项目在编译阶段，报如下错误：

npm ERR! PhantomJS not found on PATH
1

因为依赖包在编译过程中可能会涉及脚本执行，但是脚本执行环境有误，导致以上报错信息，解决方法就是单独安装phantomjs：

npm install phantomjs@2.1.1 --ignore-scripts
1

六、拓展阅读

• 《Vue进阶（幺陆玖）信创终端适配改造》
• 《Vue进阶（幺陆肆）babel.config.js配置文件详解》
• 《protocolcheck.js》