Vue在IE下打开空白解决方案

已于 2022-04-24 17:17:55 修改
阅读量1.7k 收藏 1
点赞数 1
分类专栏： javascript Vuejs 文章标签： vue.js
于 2022-04-13 09:55:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42066070/article/details/124141121
版权
本文介绍了如何解决使用Vue CLI 4.x创建的项目在IE下显示空白的问题，强调无需安装babel-polyfill。文章提供了一个四步解决方案，并给出了涉及的配置文件（package.json, vue.config.js, babel.config.js, main.js）的关键代码片段，成功解决了Vue 2.x在IE的兼容性问题。" 5718936,296166,gperf：GNU完美哈希函数生成器详解,"['编译器', 'C语言', '哈希函数', '软件工具', '数据结构']
摘要由CSDN通过智能技术生成

不需要装babel-polyfill ！！！

首先说前置条件：

  1. 使用的Vue Cli 4.x 创建的项目
  2. package.json里面的devDependencies节点中的@vue/cli-plugin-babel版本是4.x
  3. 装了babel-polyfill请卸载掉npm uninstall babel-polyfill，因为@vue/cli-plugin-babel里面已经包含了这个玩意
  4. vuejs的版本是2.x

然后可以看官方文档了：浏览器兼容性 | Vue CLI

先看我的解决方案，总共是要改四处地方：

 最后贴上我的关键代码：
package.json<

了解本专栏 订阅专栏 解锁全文 超级会员免费看
sunyin.liu
关注
专栏目录
订阅专栏
解决vue2.x在ie浏览器打开空白问题
蜗牛~~
12-06 5876
排查一： 先看看项目中是否安装并引入babel-polyfill这个东西，（Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码）。引入则跳过 vue项目在IE浏览器中显示空白，是因为js文件没有加载，需要引入babel-polyfill这个东西，而用vue脚手架搭建的项目是没有引入此工具的 引入方法： （1）安装 npm install --save babel-polyfill （2）修改webpack.base.conf.js app: ['babel-polyfill'.
解决vue项目在ie中打开显示空白问题
weixin_30555125的博客
09-24 1232
这是由于js没有加载 解决方法： 1、npm ibabel-polyfill 2、在APP.vue 文件中引入，语句为import "babel-polyfill" 转载于:https://www.cnblogs.com/plb2307/p/11577160.html...
vue项目在ie、360兼容模式页面显示空白问题
baidu_41601299的博客
10-30 1966
vue项目中，出现在ie与360兼容模式下打开页面呈现空白问题，如下： 控制台报main.js中语法错误~ 上网搜了一下，大部分解决方案是在webpack配置中与main.js中引入babel-polyfill进行处理 由于项目是使用webpack.config.js手动搭建，并未使用vue-cli脚手架，引入babel-polyfill之后在ie、360浏览器中仍然是显示空白。。。 原因在...
vue项目运行不报错，但是页面空白
最新发布
CLAY_Z的博客
04-17 2366
创建Echarts图时，项目正常运行了，路由没问题。但是页面空白。找了好久错误，终于明白少了个 <router-view/>组件。​​​​。
vue项目IE浏览器中打不开，为空白页
Yana1225的博客
08-17 1991
其实这个项目已经上线了，之前测过IE11的情况，而且运行良好，但是不知道最近这一次发版是改出了什么问题，IE中竟然空白了！ 也不报错，也没有任何警示之类的。 1.先自己溜了一遍有可能是什么原因……找不到原因。 2.百度找网友，大部分都提到 babel-polyfill，我也想到这个，因为之前每次起项目的时候，npm都会报出一个相关警告，只不过是警告，就没太关注。找了下项目中的相关代码，发现是有安装这个的，难道是版本出了问题？于是把依赖都删掉，重新装了一遍（相当费时间）。结果：还是不行 3.再找找蛛丝
快速解决Vue项目在IE浏览器中显示空白的问题
12-08
然而，由于历史原因，Internet Explorer（IE）浏览器对某些现代JavaScript语法不支持，导致基于Vue构建的项目在IE上可能无法正常运行，出现页面空白的情况。本文将详细解析这个问题的原因，并提供解决方案。 首先，...
Vue 2.0在IE11中打开项目页面空白的问题解决
12-09
然而，由于Internet Explorer 11（IE11）浏览器对新特性的支持不足，开发者在使用Vue 2.0进行开发时可能会遇到兼容性问题，导致在IE11中打开项目页面出现空白的情况。本篇文章将详细讨论如何解决这个问题。 问题的...
详解vue 兼容IE报错解决方案
01-19
IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法（如箭头函数），而...简单的说，兼容问题一般是IE 对于es6 的部分新对象、表达式，语法并不支持，解决方案是使用 babel-poly
vue 项目上线后，页面空白但不报错的问题（缓存问题）
CS饭 的博客
07-01 5939
vue 项目从 pre 环境上到正式环境后，在一些同事电脑中出现问题。在一个同事电脑的 chrome 浏览器中，从租户切换到管理员账户后，点击侧边栏，逐个进入新开发的页面（新增加的路由、新增加的页面），页面空白没有任何内容，但是控制台中没有任何报错，必须刷新一下才有内容。且该问题只在他的 chrome 浏览器中出现，其他浏览器没有问题。在另一个同事电脑中，不用切换账户、不用退出登录，关掉当前页面后，重新从该项目入口进入后，点击侧边栏中的新开发页面，也出现页面空白问题，刷新浏览器后页面正常。在其他一些人的电脑
Vue项目之IE下打开页面是空白
10-25 84
原因是：Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作兼容...
Vue在IE下打开空白的解决方案
ss15363380815的博客
01-21 410
不需要装babel-polyfill！ 首先说前置条件： 使用的Vue Cli 4.x 创建的项目 package.json里面的devDependencies节点中的@vue/cli-plugin-babel版本是4.x 装了babel-polyfill请卸载掉npm uninstall babel-polyfill，因为@vue/cli-plugin-babel里面已经包含了这个玩意 vuejs的版本是2.x 然后可以看官方文档了：浏览器兼容性 | Vue CLI 解决方案： 1.pa
【新手错误】VUE文件不报错但是创建的vue页面显示空白
weixin_57035990的博客
03-07 1107
代码对应版本
vue项目在ie浏览器白屏不显示问题
weixin_43655409的博客
11-15 1980
以下是我在开发中所遇到的ie兼容问题，原因有以下几种 1.是否有使用localStorage的相关插件，ie对localStorage的支持不是很好。基本的原生方法可以使用，但如果过于复杂繁琐就会出问题。可以试着把相关的localStorage先注掉，看项目在ie浏览器是否可以运行来确定问题出在哪。 2.crypto-js最新版本不兼容，这个插件是对密码和信息加密用的。我开始用的是4.1以上的最新版本，ie直接白屏。其它项目用的4.0.0的版本在ie中就可以正常显示。后来我换成4.0.0版本的还是不行。
解决vue项目在IE浏览器下运行空白
qq_43075191的博客
12-11 2836
问题1：vue项目在IE11下一片空白 原因： ·IE浏览器解析不了es6的语法，需要使用babel。但是Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。 解决： 1.在vue项目中安装babel-polyfill npm install --save-
Vue学习笔记——语法看似没错，但是页面显示空白
pigzhu01的博客
11-16 1924
main.js中如下：页面报错如下：运行正常：但是但是，页面是空白！！！！就很恼火，对于初学者来说太不友好了！
vue-cli4项目在ie浏览器出现白屏
weixin_43885974的博客
01-10 300
vue-cli4项目在ie浏览器出现白屏
vue在IE模式下白屏
lisijienumber的博客
11-17 1328
如上图，在IE模式下打开控制台报错。个人解决步骤如下： 第一步，解决 SCRIP1002：语法错误 安装Babel-polyfill npm install Babel-polyfill --save-dev 在main.js中引入 import "Babel-polyfill" 修改webpack.base.conf.js文件，添加'Babel-polyfill' 重新编译运行，大部分情况下解决问题。不幸的是，我还是出问题了，运行出
浅谈 browserslist
u013262823的博客
03-01 7086
browserslist browserslist配置能够分享目标浏览器和nodejs版本在不同的前端工具。主要是为了表示当前项目的浏览器兼容情况。 官方默认配置: "browserslist": [ "&gt; 1%", "last 2 versions", "not ie &lt;= 8", "safari &gt;= 7" ] 对于部分配置参
Vue兼容IE报错：Babel-polyfill解决策略
本文提供了针对Vue项目在IE上遇到兼容性问题的全面解决方案，包括使用`babel-polyfill`来扩展IE对ES6特性的支持，以及调整Webpack配置来确保第三方库的正确编译。通过这些步骤，开发者可以更好地使Vue应用在不同...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sunyin.liu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值