一、問題描述
Vue CLI3打包上線後的代碼使用IE11打開後是空白的，控制檯報錯：
SCRIPT1003: 缺少 ':'
app.js (304501,83045)
其他瀏覽器打開沒問題，問題定位在：存在不兼容IE的代碼
二、問題分析
首先要知道，IE不支持函數簡寫
data(){
return {}
}
只能識別這種形式
data: function () {
return {}
}
還有其他的不兼容之處，最笨的辦法是手動修改所有不兼容的地方
當然還有更優的解
看下配置文件package.json中設置的兼容瀏覽器配置
"browserslist": [
"> 1%",
"last 2 versions"
]
查詢一下配置所代表的的瀏覽器, 可以發現IE10和IE11都在其列，
所以，項目本身的代碼應該是沒問題的
點擊控制檯報錯的地方app.js，發現是一個模塊不支持IE導致的
三、問題處理
最簡單的方式是將不兼容的第三方模塊換掉，如果確實需要那此法不可行
另外一個方式是使用@babel/polyfill + babel.config.js配置
1、安裝依賴
cnpm i @babel/polyfill -S
2、入口文件 main.js 引入依賴
import '@babel/polyfill';
3、修改 babel.config.js
module.exports = {
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry'
}
]
],
};
4、修改 vue.config.js
默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來。
依賴較多，索性將所有的依賴都加上，不過會增加打包後的體積,比如我的項目從7.5M增加到了19.6M
module.exports = {
transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : [],
}
另外，如果是babel-polyfill + webpack.config.js網上很多文章都是說這個的，可以參看:
https://github.com/PanJiaChen/vue-element-admin/wiki
參考