Vue项目下IE报错 SCRIPT1003: 缺乏 ':'，致使页面空白的解决方案

❝

今年年初加入了物资团队，遇到的第一个问题就是解决IE的兼容性问题。

❞

1 现象

当时的状况是IE浏览器在登陆系统时，登陆页没法加载，页面显示空白，因此也没法访问系统里的其余页面。

2 查看报错

在IE浏览器中输入系统网址，打开控制台，发现有这样的报错：SCRIPT1003: 缺乏 ':' 第一个想法就是须要对webpack进行一些兼容性配置，因而小编低下头默默的先进行了一统统用配置操做。

3 进行通用兼容性配置

因为本系统前端框架用到的脚手架是3.x版本，所以得针对cli3来进行配置。

3.1 对vue.config.js文件进行检查

3.2 引入polyfill

cnpm install es6-promise –D

3.3 配置presets

打开babel.config.js文件，将presets进行以下设置：

// vuecli3 不须要配置transform-vue-jsx
presets: [
  [
    '@vue/app',
    {
      useBuiltIns: 'entry',
      polyfills: ['es6.promise', 'es6.symbol']
    }
  ]
],
plugins: ['lodash', 'jsx-v-model']
}

3.4 入口文件的配置

打开main.js文件，将3.1安装的polyfill进行引入：

import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

4 进行第三方库的排查

进行通用配置以后，仍然报错，这时候就能够肯定剩下的缘由是因为第三方插件引发的，须要在package.json文件中查看引入了哪些第三方库。

将可能会有兼容性问题的库引入到vue.config.js文件下的transpileDependencies集合中，经排查，将如下两个库补充进集合中：

  transpileDependencies: [
    'vue-echarts',
    'resize-detector',
    'v-contextmenu',
    'vue-runtime-helpers'
  ]

5 测试

配置完成后，从新启动项目进行验证，这时候发现能够成功登陆系统并进入首页。

到此为止这个问题也就解决了，能够顺利加载出登陆页面，而且成功登进了系统。

顺利解决，喜大普奔hē hē hē hē。

关于做者：JeremyCC

一个爱唱歌的前端工程狮，喜欢我能够点关注噢！（头像仅供参考，哈哈）