问题现象

项目使用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/cli3
presets: [['@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配置文件介绍链接

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐