VUE项目之IE白屏

最新推荐文章于 2024-04-19 17:09:02 发布
最新推荐文章于 2024-04-19 17:09:02 发布
阅读量2.8k 收藏 4
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42122531/article/details/122166583
版权
本文详细介绍了在Vue项目中遇到的IE11浏览器白屏问题，包括chunk-vendors.js的依赖包兼容问题和app.js的编译错误。通过将特定依赖项添加到transpileDependencies并调整.env文件中的node_env值为production，成功解决了白屏问题，确保项目在IE11下的正常运行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >



项目场景：

vue项目需要在谷歌火狐ie11兼容



问题描述：

vue项目在谷歌火狐正常，在ie11白屏

chunk-vendors.js报错，app.js报错



原因分析：

1、chunk-vendors.js报错，错误的来源在node_modules里的文件里，所以应该是依赖包的兼容问题

2、app.js报错，定义在编译代码上的问题



解决方案：

1.chunk-vendors.js:

通过网上各种百度，找到了一些比较合理的解决方案，我们可以根据报错定位到该node_modules，里的文件夹；将该文件夹放在transpileDependencies里

transpileDependencies: ['babel-polyfill','caniuse-lite','autoprefixer']

最低0.47元/天 解锁文章
qq_42122531
关注
解决vue2.x在ie浏览器打开空白问题
蜗牛~~
12-06 6129
排查一： 先看看项目中是否安装并引入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'.
解决：Vue2项目兼容IE，页面出现白屏
枯萎花一朵
12-28 1167
Vue2项目兼容IE，页面出现白屏
旧版本的IE浏览器上，Vue2可能会出现白屏或不兼容的问题
qq_45496282的博客
08-22 889
如果以上方法都无法解决问题，可以考虑使用Vue的官方插件vue-cli-plugin-ie，该插件可以自动处理IE浏览器的兼容性问题。使用Babel进行转译：使用Babel将Vue的代码转换为兼容旧版浏览器的语法和特性，确保代码可以正常运行。在部分旧版本的IE浏览器上，Vue2可能会出现白屏或不兼容的问题。避免使用不支持的特性：在编写代码时，尽量避免使用不被旧版本浏览器支持的特性，或者提供适当的备用方案。检查Vue的版本：确保使用的是最新版本的Vue，因为Vue团队会不断优化和修复兼容性问题。
vue在IE模式下白屏
lisijienumber的博客
11-17 1382
如上图，在IE模式下打开控制台报错。个人解决步骤如下： 第一步，解决 SCRIP1002：语法错误 安装Babel-polyfill npm install Babel-polyfill --save-dev 在main.js中引入 import "Babel-polyfill" 修改webpack.base.conf.js文件，添加'Babel-polyfill' 重新编译运行，大部分情况下解决问题。不幸的是，我还是出问题了，运行出
导致vue2 项目在ie浏览器中白屏的原因，及ie 不兼容的工具总结
qq_39877681的博客
09-11 931
导致vue2 项目在ie浏览器中白屏的原因，及ie 不兼容的工具总结
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
在开发Vue项目时，遇到IE11浏览器白屏并报出`SCRIPT1002: 语法错误`的问题，通常是由于IE11不支持ES6语法导致的。Vue.js自身和许多现代JavaScript库广泛使用了ES6特性，而IE11并不完全支持这些新特性。以下是一些...
快速解决Vue项目在IE浏览器中显示空白的问题
12-08
然而，由于历史原因，Internet Explorer（IE）浏览器对某些现代JavaScript语法不支持，导致基于Vue构建的项目在IE上可能无法正常运行，出现页面空白的情况。本文将详细解析这个问题的原因，并提供解决方案。 首先，...
如何解决vue2.0下IE浏览器白屏问题
01-21
公司新开发的项目需要兼容到IE9+ 就在index.html页面加入 <meta http-equiv=X-UA-Compatible content=IE=edge> 不起作用 总结方法： 1、兼容IE9/IE10可能会遇到语法或者 Promise错误，安装 babel-polyfill ...
vue2,vue-cli3兼容ie11 白屏问题
faker____的博客
02-06 522
解决方法：npm i url-search-params-polyfill，在main.js上面import 'url-search-params-polyfill'解决方法：npm i babel-polyfill -D 在main.js最上面import 'babel-polyfill'引入。解决方法：package.json中的sockjs-client包或者package-lock.json中的版本高或者低，npm i sockjs-client@1.5.1 -D，使用1.5.1这个版本。
Vue.js项目在IE11白屏报错
热门推荐
光脚丫思考的专栏
10-26 2万+
本文总结了Vue.js项目在IE11浏览器中白屏报错，不显示任何内容的问题原因，以及可能的几种的解决方案。
VUE2.0项目在ie中打开后页面空白的问题
qq_40652539的博客
12-06 1438
报错如下： 原因： Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作...
IE白屏修复，vue 兼容IE
Yseventeen
04-25 2953
白屏报错：SCRIPT5022: SecurityError 主要原因应该是代码中有es6语法，IE解析错误，如果代码中没有就排查是不是引入的第三方插件中含有es6 语法； 排查方法： 1.回忆最近导入的包，先注释掉看看是不是该文件引起的 2. main.js 将引入的包一个一个注释排出看看是哪个文件导致的； 3. 引入 babel-polyfill，转化es6 语法，可以配置转化node-module 引入的包； 4. 找...
解决IE浏览器无法显示VUE项目的方法
xybhua的博客
12-31 2590
一、ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser。Promise为ES6语法，有的浏览器不支持ES6,所以需要安装babel-polyfill来将ES6转换为浏览器可识别的ES5语法。
vue项目在IE上显示空白 报错SCRIPT1006: 缺少 ')'
阿飞
11-18 1万+
文章目录1.项目中安装`babel-polyfill`，进行配置2.在ie浏览器中调试出错位置 vue项目在ie中不能显示，一直报错，根据网上教程安装了babel-polyfill，可还是不行，本文教你如何解决该问题 1.项目中安装babel-polyfill，进行配置 如果你已经配置了可以跳过该步骤 安装: npm instatll babel-polyfill --save 在 web...
vue3 - 打包后chunk-vendors.js文件很大导致页面加载很慢、页面白屏、解决方案，如何解决vue3+vue/cli-service打完包vendors.js太大导致加载非常慢（完美解决
高级前端工程师
03-08 1万+
vue3，chunk-vendors.js，build打包后加载太慢，打包后页面一直加载不出来，build打包完毕chunk-vendors.js文件特别大加载很慢怎么办，如何解决vue-cli打包后vendors.js，解决vue打包后vendor.js文件过大问题，使用vue打包时vendor文件过大，build包太大导致首屏过长的解决方案，解决vue-cli脚手架打包后vendor文件过大的问题，vue打包时，chunk-vendors.js文件过大怎么优化，首页加载慢问题，解决vue打包chunk-
【vue启动项目报错】 chunk-vendors.js:1 Uncaught SyntaxError: Unexpected token ‘＜‘
piano_diano的博客
08-30 6552
原文链接：https://www.tqwba.com/x_d/jishu/5109.html 问题描述： 某一天启动一个vue项目时，重新 npm install 发现启动的项目报错了 chunk-vendors.js:1 Uncaught SyntaxError: Unexpected token '<' app.js:1 Uncaught SyntaxError: Unexpected token '<' 解决： 将vue.config.js 的 publicPath 是 './'，修改为
关于vue后台管理项目报错 Loading chunk （chunk-538e7eec） failed 已解决
FTEzreal的博客
06-16 1756
页面报错信息： 本地运行没任何问题 打包上线后就报如下错，好叭开始检查。 1.检查代码：是否存在错误语法 2.检查引入文件：是否引入了不存在的模块依赖 3.检查路由：是否生成了不存在的路由 4.检查webpack打包配置：是否正确更新文件 5.删除dist文件，重新打包 6.删除node_moduls，重新初始化项目安装依赖 以上方法，全试了一遍，仍然报错！！！ 好的下一步，自己尝试解决无果，求助同事。 1.同事通过仓库pull了项目代码到本地运行，没有问题 2.检查代码错误，没有问题 3.打印路由，没
vue2 ie浏览器chunk-vendors.js报错
最新发布
weixin_48667689的博客
04-19 1285
vue2 ie浏览器chunk-vendors.js报错
vue3项目IE白屏
05-25
Vue 3 使用了新的 ECMAScript 标准，不再支持 IE11。因此，在使用 Vue 3 开发的项目中，如果用户使用 IE11 访问，可能会出现白屏的情况。 解决方法： 1. 在 `index.html` 文件中添加以下代码： ``` <!-- IE11 兼容性处理 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.esm-browser.js"></script> <script> if (typeof window !== "undefined") { window.process = { env: { NODE_ENV: "development" } }; } </script> ``` 2. 在 `main.js` 文件中添加以下代码： ``` import 'core-js/features/array/flat-map'; import 'core-js/features/promise'; import 'core-js/features/weak-map'; import 'core-js/features/string/pad-start'; import 'core-js/features/string/pad-end'; ``` 这些代码会引入一些 polyfill，用来兼容 IE11。 3. 如果还是无法解决问题，可以尝试使用 `@vue/cli-plugin-babel/preset` 插件，将代码编译为 ES5，以兼容 IE11。 ``` npm install --save-dev @vue/cli-plugin-babel ``` 在 `babel.config.js` 文件中添加以下代码： ``` module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] } ``` 以上是解决 Vue 3 项目在 IE11 中出现白屏的方法，希望能帮到你。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值