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 v-for直接循环数字实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了watch里面的deep和immediate作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家详细介绍了Vue+Openlayers实现实时坐标点展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
解决element DateTimePicker+vue弹出框只显示小时
这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
本篇文章主要介绍了基于vue实现分页/翻页组件paginator示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了vue实现自定义公共组件及提取公共的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Vue中使用this.$set()实现新增数据,更新视图方式。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家详细介绍了vue中非父子组件通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了vue刷新后瞬间闪烁,无法解析的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了Vue祖孙组件如何实现传值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论