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

本文链接：https://blog.csdn.net/2401_84619287/article/details/138962339

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。


或者通过以下方式：

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


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

it is router a


### 二、组件懒加载


随着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. 使用 `webpack` 的 `require.ensure()`


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


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

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


### 三、ES6代码转ES5代码


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

{
“presets”: [
“es2015”
]
}


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


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


1. 初始化转码项目

vue init webpack Es6ToEs5


2. 安装转码工具

npm install -g babel-cli
npm install --save -dev babel-cli babel-preset-latest
npm install -g babel-preset-latest


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

{
“presets”:[“latest”]
}，


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

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


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


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


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


#### 4.1 protocolCheck 实现


`vue`可通过使用`protocolCheck`实现以上功能。 [protocolcheck.js](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0) 主要功能是检测电脑注册表中已注册的exe软件程序是否唤醒成功。


语法格式如下：

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


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


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


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


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


![在这里插入图片描述](https://img-blog.csdnimg.cn/d180e82daae84053abdfaf14ba34fb87.png)


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





### 总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

这里分享一些前端学习笔记：

* **html5 / css3 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/c7aea89db6b059151c753196f8f4e9b5.png)

  

* **JavaScript 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/af0c75f32f6618baccf39ce440a0fb5c.png)

* **Vue 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/94cca01f6717f672208838e9ac549be1.png)