vue不兼容(babel-polyfill)IE浏览器,白屏

vue 项目打包后在IE11浏览器白屏

控制台报错:

SCRIPT1002: 语法错误

通过vue-cli2搭建的项目,需要兼容IE11浏览器,所以使用了babel-polyfill,
开发环境下正常,打包后就报错了。

图片描述

随便说一下,开发环境下把babel-polyfill去掉也能在IE11浏览器正常运行

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
package.json 文件
"dependencies": {

"babel-polyfill": "^6.26.0"

}
main.js 文件
//此处好像加不加都行
import 'babel-polyfill'

webpack.base.conf.js 文件
entry: {

app: ["babel-polyfill", "./src/main.js"]

},

既然开发环境可以,生产环境报错,我觉得就是开发和生产环境的编译结果不同导致的,但是又不知道怎么改,目前两个环境的构建模式都是:devtool: 'eval'

期待大神指教,谢谢

阅读 7.4k
3 个回答

我遇到过得白屏基本都是es6语法导致的,你可以查看下打包后的js中是否包含es6代码,例如:letconst() =>来简单查询下。ps:static文件夹下面的js中如果使用的es6是没有被转成es5的。希望对你能有点帮助。

看一下是什么语法导致的,定位一下问题再说吧

正如1楼所说,报错的那个文件确实存在let const => 这些es6代码,IE11不支持所以报语法错误
我这里关于babel-polyfill插件的使用是正确的,之所以出现这些未转义的代码,是因为babel-loader的编译范围所限
因为我的static文件夹和element-ui也用了es6的语法,所以也要编译,代码如下:

webpack.base.conf.js

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
      resolve('src'), //默认编译文件
      resolve('static'), //编译静态文件
      resolve('node_modules/element-ui/src'), //编译element-ui
      resolve('node_modules/element-ui/packages') //编译element-ui
    ]
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题