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://blog.csdn.net/Dragonfly_w/article/details/123167706
三、参考资料
- https://blog.csdn.net/Dragonfly_w/article/details/123132330
- https://blog.csdn.net/qq_41810005/article/details/120185666
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiaehha
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22