解决vue运行在IE浏览器白屏问题

1,646 阅读1分钟

IE运行白屏问题大多都是,ie浏览器不支持项目里用到的es6语法。解决方案就是,编译的时候利用插件,把高级语法转换成es5语法。这里有两种解决方案。

配置后都需要重启项目,解决方案针对于vue-cli3的版本

方案一

利用 babel-polyfill 插件

// 下载依赖
npm install --save babel-polyfill

在项目入口文件里 引入即可

8b4d2f9d6a582c6aaa2236b33aa9764.png

方案二

根据vue-cli官方文档的的描述,发现可以直接在main.js里引入已经预装好的两个插件

9eb1bd817295fa0236b795a7fc3cd66.png

在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[/\\]/
      ]
 }

我是写代码的二毛,还在学习阶段,有错误的话欢迎指出。