最近翻看原来的代码,发现在ie浏览器下出现空白,心里想着ie虽然份额在减少,但是技术上能解决当然最好了,于是开始检查配置文件,发现配置文件已有
babel-polyfill
要解决ie兼容性问题,单单有babel-polyfill还不行,还需要babel-loader、@babel/core、 @babel/preset-env
安装:npm install -D babel-loader @babel/core @babel/preset-env webpack
默认情况下 babel-loader 会忽略所有 node_modules 中的文件,相当于以下配置
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
如果开发过程中使用的第三方组件,如vuex-persist在ie下存在兼容性问题,我们则需要单独处理
在cli2项目中你可以修改webpack.config.js的loader来解决
module: {
rules: [
...
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('node_modules/vuex-persist')]
}
]
}
在cli3项目中可以采用添加transpileDependencies: ['vuex-persist'] 配置来解决,最后,你还需要在cli3项目需在babel.config.js文件中、cli2项目则需在.babelrc 文件中,添加如下代码presets: ['@babel/preset-env']。
由于 Babel 只转换语法(如箭头函数), 你可以使用 babel-polyfill 支持新的全局变量,例如 Promise 、新的原生方法等
在main.js文件中引入:import 'babel-polyfill'
至此ie9及以上浏览器的js兼容性都已经解决了,打开页面已经不报错了,有些第三方组件如果存在ie兼容性问题,则按照上面处理vuex-persist方式处理即可;当然页面布局在ie9下尤其是css display:flex会存在样式兼容性问题,在ie10,ie11则不存在,暂时还没发现有更便捷的方式来解决。
以下是我cli3项目中部分package.json
"devDependencies": {
"@ant-design/colors": "^3.1.0",
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-plugin-unit-jest": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "^1.0.0-beta.20",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.6",
"babel-plugin-import": "^1.11.0",
"babel-polyfill": "^6.26.0",
"compression-webpack-plugin": "^3.0.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"vue-svg-icon-loader": "^2.1.1",
"vuex-persist": "^1.8.0",
"vue-template-compiler": "^2.5.22",
"webpack": "^4.34.0",
"webpack-theme-color-replacer": "^1.2.15"
}
参考了以下兄弟写的文章
https://www.jianshu.com/p/d971bffff546
https://blog.csdn.net/Maggie_01/article/details/101159448
https://blog.csdn.net/weixin_34353714/article/details/91422087