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

2023-11-09 11:15| 来源: 网络整理| 查看: 265

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

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

【本文地址】

公司简介

联系我们