IE运行白屏问题大多都是,ie浏览器不支持项目里用到的es6语法。解决方案就是,编译的时候利用插件,把高级语法转换成es5语法。这里有两种解决方案。
配置后都需要重启项目,解决方案针对于vue-cli3的版本
方案一
利用 babel-polyfill 插件
// 下载依赖
npm install --save babel-polyfill
在项目入口文件里 引入即可
方案二
根据vue-cli官方文档的的描述,发现可以直接在main.js里引入已经预装好的两个插件
在babel.config.js里配置下
module.exports = {
presets: [
//原有的
'@vue/babel-preset-app',
//新增的
["@vue/app", {useBuiltIns: "entry",},'@vue/cli-plugin-babel/preset']
],
}
然后再main.js顶部引入
import 'core-js/stable';
import 'regenerator-runtime/runtime';
如果还是白屏,检查下是否是依赖报错
解决第三方依赖转换es5
vue-cli转换的时候默认是不转换node_modules里的第三方依赖的。但提供了属性可以在vue.config.js里进行transpileDependencies的字段配置,配置需要转换的第三方包的路径。 官网文档传送门
示例
module.exports = {
transpileDependencies: [
/[/\\]node_modules[/\\][@\\]test[/\\]test1[/\\]/,
/[/\\]node_modules[/\\]test[/\\]/
]
}
我是写代码的二毛,还在学习阶段,有错误的话欢迎指出。