一、概述
项目使用vue/cli4脚手架搭建的前端项目,vue版本为2.6.10。
但开发环境的IE11打开显示白屏,F12打开显示:
查明报错原因是: I.E.不支持ES6语法。
二、解决方案
(一)解决方案1
1、安装如下的依赖包:
npm install --save-dev babel-polyfill 或 npm install --save @babel-polyfill
2、main.js的第一行引入:
/*记住一定是首行代码*/
import 'babel-polyfill' 或 import '@babel-polyfill'
3、然后在babel.config.js修改presets,内容如下:
// presets: [['@vue/app', {useBuiltIns: 'entry',}]], // 此为vue/cli3。
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry',}]], // 此为vue/cli4。
(二)解决方案2
1、vue cli官方推荐使用,前提是package.json安装了core-js或者安装:
npm install --save core-js regenerator-runtime
2、其次在main.js首行引入:
import 'core-js/stable'
import 'regenerator-runtime/runtime'
(三)解决方案3
在vue.config.js里添加如下代码:
configureWebpack: config => { config.entry.app = ['babel-polyfill', './src/main.js'];},
(四)sockjs-client
还有一种情况是在i.e.打开报错显示的sockjs-client错误,如下所示:
遇到上述的错误,降低sockjs-client的版本,请特别留意依赖描述在package-lock.json里面,也需要降低版本。将版本降低为1.5.1,执行命令:
npm i [email protected] -D
更新版本完成后在,重新编译项目,就可以解决上述问题。
留意观察上面出错的截图信息,注释中其实是可以看到具体是哪个包出现了错误,这一点非常有利于具体的定位问题,排查问题。
(五)其他情况
如果上述方法还是没有解决你们的问题,那就有可能是你们使用了第三方包,因为vue编译默认是不编译第三方包的(node_modules), 此时目标明确,就好解决问题了,在你的vue.config.js文件中添加配置:
transpileDependencies: [
'包名或使用正则匹配',
...
]