Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
彭世瑜 2020-07-06 16:03:36 3499 收藏 6
版权
一、问题描述
Vue CLI3打包上线后的代码使用IE11打开后是空白的,控制台报错:
SCRIPT1003: 缺少 ‘:’
app.js (304501,83045)
1
2
其他浏览器打开没问题,问题定位在:存在不兼容IE的代码
二、问题分析
首先要知道,IE不支持函数简写
data(){
return {}
}
1
2
3
只能识别这种形式
data: function () {
return {}
}
1
2
3
还有其他的不兼容之处,最笨的办法是手动修改所有不兼容的地方
当然还有更优的解
看下配置文件package.json中设置的兼容浏览器配置
“browserslist”: [
“> 1%”,
“last 2 versions”
]
1
2
3
4
查询一下配置所代表的的浏览器, 可以发现IE10和IE11都在其列,
所以,项目本身的代码应该是没问题的
https://browserl.ist/
点击控制台报错的地方app.js,发现是一个模块不支持IE导致的
三、问题处理
最简单的方式是将不兼容的第三方模块换掉,如果确实需要那此法不可行
另外一个方式是使用@babel/polyfill + babel.config.js配置
1、安装依赖
cnpm i @babel/polyfill -S
1
2、入口文件 main.js 引入依赖
import ‘@babel/polyfill’;
1
3、修改 babel.config.js
module.exports = {
presets: [
[
‘@vue/app’,
{
useBuiltIns: ‘entry’
}
]
],
};
1
2
3
4
5
6
7
8
9
10
4、修改 vue.config.js
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。
依赖较多,索性将所有的依赖都加上,不过会增加打包后的体积,比如我的项目从7.5M增加到了19.6M
module.exports = {
transpileDependencies: process.env.NODE_ENV === “development” ? ["*"] : [],
}
1
2
3
另外,如果是babel-polyfill + webpack.config.js网上很多文章都是说这个的,可以参看:
https://github.com/PanJiaChen/vue-element-admin/wiki
参考
Vue CLI浏览器兼容性
Vue CLI 3 配置兼容IE10
vue cli3 创建的项目在IE11中运行,出现白屏,通过console调试发现报错SCRIPT1003: 缺少 ':'文件: app.js,行: 7391,列: 3 #4131
————————————————
版权声明:本文为CSDN博主「彭世瑜」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/mouday/article/details/107160399