Vue.js项目在IE11白屏报错的解决方法

更新时间：2023年08月04日 15:43:00 作者：光脚丫思考

本文主要介绍了Vue.js项目在IE11白屏报错的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、概述

项目使用vue/cli4脚手架搭建的前端项目，vue版本为2.6.10。但开发环境的IE11打开显示白屏，F12打开显示：

查明报错原因是： I.E.不支持ES6语法。

二、解决方案

(一)解决方案1

1、安装如下的依赖包：

npm install --save-dev babel-polyfill 或 npm install --save @babel-polyfill

2、main.js的第一行引入：

/*记住一定是首行代码*/
import 'babel-polyfill' 或 import '@babel-polyfill'

3、然后在babel.config.js修改presets，内容如下：

// presets: [['@vue/app', {useBuiltIns: 'entry',}]], // 此为vue/cli3。
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry',}]], // 此为vue/cli4。

(二)解决方案2

1、vue cli官方推荐使用，前提是package.json安装了core-js或者安装：

npm install --save core-js regenerator-runtime

2、其次在main.js首行引入：

import 'core-js/stable'
import 'regenerator-runtime/runtime'

(三)解决方案3

在vue.config.js里添加如下代码：

configureWebpack: config => { config.entry.app = ['babel-polyfill', './src/main.js'];},

(四)sockjs-client

还有一种情况是在i.e.打开报错显示的sockjs-client错误，如下所示：

遇到上述的错误，降低sockjs-client的版本，请特别留意依赖描述在package-lock.json里面，也需要降低版本。将版本降低为1.5.1，执行命令：

npm i sockjs-client@1.5.1 -D

更新版本完成后在，重新编译项目，就可以解决上述问题。留意观察上面出错的截图信息，注释中其实是可以看到具体是哪个包出现了错误，这一点非常有利于具体的定位问题，排查问题。

(五)其他情况

如果上述方法还是没有解决你们的问题，那就有可能是你们使用了第三方包，因为vue编译默认是不编译第三方包的（node_modules）, 此时目标明确，就好解决问题了，在你的vue.config.js文件中添加配置：

transpileDependencies: [
    '包名或使用正则匹配'，
    ...
  ]

vue-cli4配置vue.config.js：https://www.jb51.net/article/188130.htm

三、参考资料

https://blog.csdn.net/Dragonfly_w/article/details/123132330

https://blog.csdn.net/qq_41810005/article/details/120185666

到此这篇关于Vue.js项目在IE11白屏报错的解决方法的文章就介绍到这了,更多相关Vue.js IE11白屏报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中使用swiper失效问题及解决
这篇文章主要介绍了vue中使用swiper失效问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue精简版风格指南（推荐）
这篇文章主要介绍了Vue精简版风格指南的相关资料，包括组件名称，指令及特征,需要的朋友可以参考下
2018-01-01
vue配置font-awesome5的方法步骤
这篇文章主要介绍了vue配置font-awesome5的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
el-upload大文件切片上传实现示例详解
这篇文章主要为大家介绍了el-upload大文件切片上传实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
用Vue Demi 构建同时兼容Vue2与Vue3组件库
这篇文章主要介绍了用Vue Demi 构建同时兼容Vue2与Vue3组件库，我们通过考虑其功能、工作原理以及如何开始使用它来了解 Vue Demi，下面我们一起进入文章学起来吧
2022-02-02
深入浅析vue-cli@3.0 使用及配置说明
这篇文章主要介绍了vue-cli@3.0 使用及配置说明,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
vue.js自定义组件实现v-model双向数据绑定的示例代码
这篇文章主要介绍了vue.js自定义组件实现v-model双向数据绑定的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
vue中的事件修饰符once,prevent,stop,capture,self,passive
这篇文章主要介绍了vue中的事件修饰符once,prevent,stop,capture,self,passive，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue中router-link如何添加mouseover提示
这篇文章主要介绍了Vue中router-link如何添加mouseover提示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-11-11
vue在html标签{{}}中调用函数的方法总结及对比
这篇文章主要给大家介绍了关于vue在html标签{{}}中调用函数的方法总结及对比,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2023-03-03