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项目实现记住密码到cookie功能示例(附源码)

    vue项目实现记住密码到cookie功能示例(附源码)

    本篇文章主要介绍了vue项目实现记住密码到cookie功能示例(附源码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • vue中的虚拟dom知识点总结

    vue中的虚拟dom知识点总结

    这篇文章主要介绍了vue中的虚拟dom知识点总结,文章围绕主题内容展开详细介绍,需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2022-04-04
  • vue实现搜索小功能

    vue实现搜索小功能

    这篇文章主要为大家详细介绍了vue实现搜索小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 基于vue v-for 循环复选框-默认勾选第一个的实现方法

    基于vue v-for 循环复选框-默认勾选第一个的实现方法

    下面小编就为大家分享一篇基于vue v-for 循环复选框-默认勾选第一个的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue Input输入框自动获得焦点的有效方法

    Vue Input输入框自动获得焦点的有效方法

    我们有时候会遇到要输入框自动获取焦点的情况,下面这篇文章主要给大家介绍了关于Vue Input输入框自动获得焦点的简单方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 阿望教你用vue写扫雷小游戏

    阿望教你用vue写扫雷小游戏

    这篇文章主要介绍了阿望教你用vue写扫雷小游戏,本文通过实例代码效果图展示的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)

    Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)

    本文中实现的附件上传区域支持超多类型附件分类型上传,并且可根据特定条件具体展示某些类型的附件上传,本文给大家分享Vue页面内公共的多类型附件图片上传区域并适用折叠面板的示例代码,需要的朋友参考下吧
    2021-12-12
  • vue+element模态框中新增模态框和删除功能

    vue+element模态框中新增模态框和删除功能

    这篇文章主要介绍了vue+element模态框中新增模态框和删除功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • 手写Vue源码之数据劫持示例详解

    手写Vue源码之数据劫持示例详解

    这篇文章主要给大家介绍了手写Vue源码之数据劫持的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue 实现移动端键盘搜索事件监听

    vue 实现移动端键盘搜索事件监听

    今天小编就为大家分享一篇vue 实现移动端键盘搜索事件监听,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论