问题现象
项目使用vue/cli4脚手架搭建的前端项目,vue版本为2.6.10。
但开发环境的IE11打开显示白屏,F12打开显示:
查明报错原因是: IE不支持ES6语法
解决方法一
npm install --save-dev babel-polyfill 或 npm install --save @babel-polyfill
main.js的第一行引入:
/*记住一定是首行代码*/import 'babel-polyfill' 或 import '@babel-polyfill'
然后在babel.config.js修改presets,内容如下:
// presets: [['@vue/app', {useBuiltIns: 'entry',}]],// 此为vue/cli3presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry',}]],// 此为vue/cli4
解决方法二
vue cli官方推荐使用,前提是package.json安装了core-js或者安装
npm install --save core-js regenerator-runtime
其次在main.js首行引入
import 'core-js/stable'import 'regenerator-runtime/runtime'
解决方法三
在vue.config.js里添加如下代码:
configureWebpack: config => { config.entry.app = ['babel-polyfill', './src/main.js'];},
还有一种情况是在ie中打开报错显示的sockjs-client错误
/***/ "./node_modules/sockjs-client/dist/sockjs.js":/*!***************************************************!*\!*** ./node_modules/sockjs-client/dist/sockjs.js ***!\***************************************************//*! no static exports found *//***/ (function(module, exports, __webpack_require__) {
解决
网络解决方案
此方案根本行不通,也不知道是谁测试出来的,本人亲测完全解决不了实际问题
** 正确解决 **
降低sockjs-client的版本,他依赖描述在package-lock.json在里面,如果有这种情况出现,你的版本可能在我下方给出这个版本之上
npm i sockjs-client@1.5.1 -D
更新版本完成后在,重新编译项目
即可解决
如果上述方法还是没有解决你们的问题,那就有可能是你们使用了第三包,因为vue编译默认是不编译第三包的(node_modules), 此时目标明确,就好解决问题如下:
在你的vue.config.js文件中添加配置
transpileDependencies: ['包名或使用正则匹配',...]
vue.config.js配置文件介绍链接