记录：vue中使用axios添加了babel-polyfill和es6-promise在ie下依然app.js报错页面一片空白的解决办法

最新推荐文章于 2025-07-06 10:05:28 发布
原创 最新推荐文章于 2025-07-06 10:05:28 发布 · 4.8k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #axios #ie

在Vue项目中，使用axios进行请求时遇到IE浏览器显示空白的问题。尽管已引入babel-polyfill和es6-promise，但IE仍然报错。经过排查发现错误源自mainPublic.js的Promise相关代码，进一步分析确定是箭头函数导致的不兼容。将箭头函数替换为传统函数表达式后，问题得到解决。对于为何引入兼容库后箭头函数仍无法使用，仍有待深入研究。

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

最近一个vue开发的项目，事先已经兼容ie9+，但是最后写完整个项目后chrome，firefox下完美运行，可是用ie的时候却一片空白？？？？？网上找了很多方法都是已经做好的ie兼容babel-polyfill、es6-promise。但是为什么还是不行？？
在这里插入图片描述

好吧点进去看看 =>

在这里插入图片描述

最后一行看到了是在自己写的请求文件mainPublic.js里出问题了，去看了一下代码

发现原来是axios出问题了，是哪里出问题呢
在这里插入图片描述

在这里插入图片描述

看了一下最后锁定这两个通用请求函数里面，排查了一下是promise的问题，可是已经引入相关兼容文件了为什么还是不行呢？？
然后自己另外新写一个html试一下直接用axios，这下终于发现具体哪里出问题了

ie打开报错
在这里插入图片描述

点进去之后问题迎刃而解

最低0.47元/天 解锁文章

200万优质内容无限畅学
兼容ie浏览器 vue项目IE浏览器白屏不显示解决方案
qq_45239012的博客
03-15 1124
原因分析： Ie浏览器不兼容的原因主要是因为不识别es6语法 解决：需要通过babel-polyfill转化，使项目中的依赖包支持ie浏览器 说明：在vue cli4.x之后，无需手动安装babel-polyfill,脚手架中已经内置 如果脚手架版本低需要下载依赖 npm i babel-polyfill –save 一般项目中有babel-polyfill，就会自动转化依赖包，但是也有一些特殊的依赖包不被babel识别 如果你还是发现浏览器白屏不显示，那可能就是有一些依赖不被babel识别需要你手动修改
Vue项目兼容ie9+，浏览器空白报错
weixin_54893133的博客
01-27 814
文章目录项目背景基本配置ie调试仍空白解决办法其他兼容问题总结总结 项目背景 ​ 项目采用vue全家桶和elementUI等插件技术，vue框架默认不支持ie8及以下，ie9+需要安装babel-polyfill插件，将项目中的es6语法转换为目标浏览器兼容的低版本语法。 注意：使用Webpack版本要高于2.6.1 基本配置 ie调试空白：babel-polyfill已配置，可跳过此节 axios对promise进行兼容，可以只用es6-promise 先安装： np
Vue项目在ie浏览器显示空白解决方法（安装babel-polyfill ）
weixin_44090040的博客
08-27 1095
问题描述： 使用vue-cli脚手架搭建的项目，【npm run dev】运行，在chrome下显示正常，但是在ie下显示空白，无法打开页面。 文章目录问题描述：二、使用步骤1.安装babel-polyfill2.在【main.js】中引入babel-polyfill3.在【webpack.base.conf.js】中找到【entry】，修改配置如下： 二、使用步骤 1.安装babel-polyfill npm install babel-polyfill --save-dev 2.在【main.j
ie浏览器打开vue项目白屏问题
楠的博客
08-23 1586
第一步： cnpm install babel-polyfill -S 第二步： 在入口文件main.js文件中引入 import “babel-polyfill” 修改配置文件 vue-loader.conf.js entry: ["babel-polyfill", "./app/js"] 最后在index.html中加入 <mate http-equiv="X-UA-Compat...
实现ES6在IE浏览器中兼容的babel.js与polyfill.js指导
最新发布
weixin_36464343的博客
07-06 930
定义polyfill一词原意为填补地基的材料，而在Web开发中，它指的是那些用于为旧浏览器提供新API或者新JavaScript特性的代码。polyfill.js允许开发者在不支持特定JavaScript版本的浏览器中使用现代代码，而不必担心其兼容性问题。工作原理在技术层面，一个polyfill脚本通常会检测浏览器是否支持某个特定的JavaScript特性，如果不支持，它会模拟这个功能，使得开发者编写的代码能够在这些旧浏览器上以类似的方式运行。
vue项目安装babel-polyfill后，在IE下打开页面依然空白的问题解决方案
热门推荐
zhangqiangzgz的专栏
03-11 1万+
最近手头的vue项目需要兼容IE，正常安装babel-polyfill并进行相应的配置后，IE浏览器打开页面依然空白。 后续又安装了babel-preset-stage-2，调试了很久，结果依然不管用。后来我在webpack.base.conf.js文件中发现了一个babel-loader的配置，默认是没有绿圈中的配置的，这是后续加的，加上这个配置就好了，IE浏览器下就可以正常访问页面了。原...
Vue 2.0在IE11中打开项目页面空白的问题解决
linpenghui958的博客
08-17 6212
在IE11中打开vue项目报错 原因是 Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。为了解决这个问题，我们使用一种叫做 Polyfil
vue项目兼容ie浏览器的问题：在其他浏览器显示都是正常的，在ie下显示空白
vip.khan的博客
05-28 3213
1、安装babel-polyfill npm install babel-polyfill --save-dev 2、main.js中引入 import 'babel-polyfill' 3、webpack.base.conf.js文件里修改代码如下 module.exports = { entry: { app: ["babel-polyfill", "./src/main.js"...
vue项目兼容IE浏览器之在ie浏览器出现空白页
weixin_44962808的博客
12-28 369
vue项目在IE下出现空白，读不出数据的情况。还有一些ES新语法不兼容问题的处理。 一、使用vue-cli创建项目 1、在vue项目中使用 npm 安装babel-polyfill npm install --save-dev babel-polyfill 2、在mian.js中引入babel-polyfill（在引入vue、vuex之前引入） import 'babel-polyfill' ...
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
01-21
问题现象 项目使用vue/cli3脚手架搭建的前端项目，vue版本为...包含的代码中有ES6的语法，IE不支持，查了网上很多资料都说使用babel-polyfill来解决。 现象一：IE不支持ES6语法 Vuex requires a Promise polyfill
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
10-17
此外，我们还需要在 `main.js` 文件中引入 `@babel/polyfill` 和 `es6-promise`，并执行 polyfill： ```javascript import '@babel/polyfill'; import Es6Promise from 'es6-promise'; Es6Promise.polyfill(); ``` ...
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
01-18
说明: 或许你并不没有使用Promise,但是有可能你使用Axios等,其中原理也是Promise,进行了封装而已 解决办法: 步骤一: 安装 babel polyfill npm install –save babel-polyfill 如果你使用的是yarn安装的话: yarn ...
Vue进阶（七十六）：vue项目在IE下显示空白打不开问题
IT全栈 华强工作室
09-18 2128
解决方法：安装 “babel-polyfill” 1、命令：npm安装 npm install --save-dev babel-polyfill 或 cnpm install --save-dev babel-polyfill 2、在入口main.js文件引入：import 'babel-polyfill'，放页面顶部最好。 3、在build文件夹下找到webpack.base.conf.js...
babel-polyfill解决vue框架项目IE无法打开问题
Alice
10-25 1483
babel-polyfill解决vue框架项目IE无法打开问题vue框架webpack打包原因解决方法 vue框架webpack打包 vue-cli搭建了一套vue的开发框架，webpack打包发布后，Chrome可以正常打开，但是IE无法打开。 原因 ie9和一些低版本的IE浏览器不支持es6新语法 解决方法 安装babel-polyfill组件 ： npm install --save-dev...
vue项目中正确引用babel-polyfill后在IE中仍然无效，显示空白页的原因及解决方案
Mr_CZL的博客
05-13 1万+
最近用vue开发项目，在git上直接拉取了一个vue-admin-template模板。 然而该模板作者明确表明没有兼容IE，如果需要，自己安装babel-polyfill。 由于本项目还是会考虑高版本IE的兼容，所以安装了babel-polyfill，并正确引用了，（安装和引用方法略，网上很多，至于引用方法1.在entry处引用。2.在main.js处import引用。经测试都是有效的，引用...
vue项目兼容IE浏览器，页面空白
weizhiyuan20的博客
05-14 397
解决方案： 1、安装 babel-polyfill 包 npm installbabel-polyfill --save-dev 安装成功后在package.json文件中会有 2、在main.js文件中导入 import "babel-polyfill" 3、在项目下新建文件 .babelrc .babelrc内容： { "presets": [ ["env", { "modules": false, "targets": { "br.
解决vue项目在IE浏览器打开空白问题
qq_41395120的博客
05-21 3429
vue项目运行编译，发现在IE浏览器一片空白，解决方法： 1、安装babel-polyfill： npm install babel-polyfill --save-dev 2、在main.js文件中引入：import'babel-polyfill' 3、在webpack.base.config.js中将entry中的app:./src/main.js'改为下面格式 entry:{ app:['babel-polyfill','./src/main.js'] }, 4、重新...
Vue使用babel-polyfill兼容IE解决白屏及语法报错
qq_20805769的博客
03-10 5141
解决vue elementUI项目使用webpack打包上线后，服务器环境下IE报语法错误及白屏问题 在最近的项目中，在使用webpack打包后发布，有用户反馈使用IE浏览器访问会白屏，这就不能忍受了，经过排查发现，发生这个错误应该是有文件没有由ES6转ES5语法造成，而IE不兼容该语法 既然问题找到了，那就找到那应该解决起来就容易了，然后事实上并没有我想的那么简单，话不多说，直接开始。 首先，通用的方式就是，项目中引入babel-polyfill，安装方法可以自行百度，在这里我直接上命令： npm i
vue 页面在 IE11 浏览器白屏，报错：SCRIPT1003: 缺少 ':' app.js
皮皮虾的博客
03-10 6091
报错如下图： 在网上找了很多文章看，很多都是因为ES6不兼容IE浏览器引起的，应该使用 babel-polyfill 转ES6实现。 然鹅！！！在我这里是无效的 不论是在 mian.js 中引入，还是在 webpack.base.conf.js 中引入（且在‘babel-loader’中加 resolve（‘static’）），都没有实现… 点进去查看app.js，看的我欲哭无泪： 箭头一直指...
简化Vue.js开发：使用vue-fast-axios优化HTTP请求
在使用Vue快速axios解决方案前，需要安装babel-polyfill以确保async和await等ES2015+特性可以在项目中使用。 6. Webpack配置: Webpack是一个模块打包工具，用于现代JavaScript应用程序中的模块依赖管理。Webpack...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值