vue 项目在ie 下出现空白

最新推荐文章于 2023-12-08 17:24:30 发布
最新推荐文章于 2023-12-08 17:24:30 发布
阅读量3k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue ie兼容 空白 babel-polyfill
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37337830/article/details/82181983
项目中Vue在IE下出现空白问题，安装相关依赖本地运行正常，但上线仍有空白和语法报错。经搜索资料，需在index.html中添加meta属性，告知浏览器使用最新引擎解析，如设置为IE=edge，针对IE 11可改为IE=11。

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

最近项目中遇到IE 下有空白的问题，网上查看了一些 使用babel-polyfill 这个插件

1.安装 npm install babel-polyfill

2.引入方式一 require("babel-polyfill");  引入方式二  import "babel-polyfill";

3.module.exports = {

　　entry: ["babel-polyfill", "./app/js"]

};

安装后我在本地运行项目 是没有问题了。，但是放到线上去后发现 还是有空白。。还是有语法报错之类的 。后来各种搜资料。发现需要在index.html 中添加一个mate 属性来告诉浏览器使用最新浏览器引擎来解携：

<mate http-quiv="X-UA-Compatible" content="IE=edge"/>

如果想正对IE 11 的话 可以直接将 ”IE=edge“  修改位 “IE=11”

 

 

vue项目在IE下出现空白
weixin_39066827的博客
04-25 3028
vue项目中遇到IE浏览器开发是空白页，并未按路由加载组件。 原因 Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法都不会转码。解决这个问题，我们使用 Polyfill（代码填充，也可译作兼...
Vue.js项目在IE11白屏报错
热门推荐
光脚丫思考的专栏
10-26 2万+
本文总结了Vue.js项目在IE11浏览器中白屏报错，不显示任何内容的问题原因，以及可能的几种的解决方案。
vue项目IE打开空白问题（官方vue-cli 2.*）
一米阳光
03-26 685
下载安装：npm install babel-polyfill --save-dev 修改main.js： 修改webpack.base.conf.js： 重新运行： dit地址：https://github.com/Apache-Ra/vue-admin
vue项目在IE下显示空白打不开问题
a378113472的博客
10-09 1029
近期遇到了项目是vue做的，在IE浏览器下打不开，显示空白问题，解决方案如下： 打不开的原因是因为少了babel-polyfill处理器，所以第一步需要下载： npm install babel-polyfill --save-dev 第二步在package.json文件中显示： 第三步引入babel-polyfill： 在main.js文件中引入babel-polyfill，也就是加一行： i...
Edge 访问VUE（＞=ES6）空白问题
motl2000的博客
07-29 1134
Edge 访问VUE（>ES6）空白问题 刚做了VUE(ES6)的网站，发现自己机器上的Edge不能访问，显示一个空白页，但Chrome和FireFox都是可以的。 在网上搜遍了，尽有一遍说到了点子。 Edge版本太低！ Edge版本太低！ Edge版本太低！ 更新最新的Edge就行。 很多人的windows应该都是不自动更新的吧，老的Edge应该也不会更新，至少我的几台机器上的Edge都没有更新过，相信这样的用户或者开发者也不在少数吧。 网上竟然只有一个帖子讲这个事情，可能性只有如下了 VUE还不
解决vue项目在IE浏览器中显示白屏问题（亲测可用）
永远热爱前端
12-08 1498
vue项目在chrome浏览器上可以正常访问，但是在IE浏览器打开显示空白
快速解决Vue项目在IE浏览器中显示空白的问题
12-08
然而，由于历史原因，Internet Explorer（IE）浏览器对某些现代JavaScript语法不支持，导致基于Vue构建的项目在IE上可能无法正常运行，出现页面空白的情况。本文将详细解析这个问题的原因，并提供解决方案。 首先，...
Vue 2.0在IE11中打开项目页面空白的问题解决
08-29
Vue 2.0是一个流行的前端框架，然而在IE11中打开项目页面时，可能会出现空白的问题。这个问题的出现是因为Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，例如Iterator、Generator、Set、Maps、...
vue在IE模式下白屏
lisijienumber的博客
11-17 1390
如上图，在IE模式下打开控制台报错。个人解决步骤如下： 第一步，解决 SCRIP1002：语法错误 安装Babel-polyfill npm install Babel-polyfill --save-dev 在main.js中引入 import "Babel-polyfill" 修改webpack.base.conf.js文件，添加'Babel-polyfill' 重新编译运行，大部分情况下解决问题。不幸的是，我还是出问题了，运行出
Vue2.0做的项目在IE下面打开一片空白？
lyn1772671980的博客
06-14 9386
解释一：Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想...
Vue2.0做的项目在IE11下面打开一片空白？
Bright2017的博客
09-05 2万+
Vue2.0做的项目在IE11下面打开一片空白？
【VUE】解决IE浏览器无法显示VUE项目的方法
LuviaWu的博客
02-25 3962
1、ie11打不开vue项目，报错 “对象不支持“addEventListener”属性或方法” 在index.html中head标签中加上： <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 这个属性主要是设置浏览器优先使用什么模式来渲染页面的。 #代码IE=edge告诉IE使用最新的引擎渲染网页 <...
vue-vue项目谷歌其他浏览器没问题ie报错
程序员的每一天的博客
08-14 722
vue项目 IE浏览器打开报错：strict 模式下不允许一个属性有多个定义 vue组件中存在 一个标签属性冲突的情况 去掉其中一个属性
vue3.0在ie11浏览器打开空白问题如何解决？
浮生的博客
07-27 1136
不说废话，直接修改 vue.config.js，修改完保存重启项目即可 代码如下： // An highlighted block module.exports = { transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : [] }
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...
vue项目IE浏览器中打不开，为空白页
Yana1225的博客
08-17 2080
其实这个项目已经上线了，之前测过IE11的情况，而且运行良好，但是不知道最近这一次发版是改出了什么问题，IE中竟然空白了！ 也不报错，也没有任何警示之类的。 1.先自己溜了一遍有可能是什么原因……找不到原因。 2.百度找网友，大部分都提到 babel-polyfill，我也想到这个，因为之前每次起项目的时候，npm都会报出一个相关警告，只不过是警告，就没太关注。找了下项目中的相关代码，发现是有安装这个的，难道是版本出了问题？于是把依赖都删掉，重新装了一遍（相当费时间）。结果：还是不行 3.再找找蛛丝
VUE项目之IE白屏
qq_42122531的博客
12-27 2922
项目场景： vue项目需要在谷歌火狐ie11兼容 问题描述： vue项目在谷歌火狐正常，在ie11白屏 chunk-vendors.js报错，app.js报错 原因分析： 1、chunk-vendors.js报错，错误的来源在node_modules里的文件里，所以应该是依赖包的兼容问题 2、app.js报错，定义在编译代码上的问题 解决方案： 1.chunk-vendors.js: 通过网上各种百度，找到了一些比较合理的解决方案，我们可以根据报错定位到该node_modules，里
vue项目在IE上显示空白 报错SCRIPT1006: 缺少 ')'
阿飞
11-18 1万+
文章目录1.项目中安装`babel-polyfill`，进行配置2.在ie浏览器中调试出错位置 vue项目在ie中不能显示，一直报错，根据网上教程安装了babel-polyfill，可还是不行，本文教你如何解决该问题 1.项目中安装babel-polyfill，进行配置 如果你已经配置了可以跳过该步骤 安装: npm instatll babel-polyfill --save 在 web...
vue项目在ie11版本空白页
最新发布
03-08
<think>嗯，用户遇到了Vue项目在IE11中显示空白页面的问题。首先，我需要回想一下Vue3和现代JavaScript在旧版浏览器中的兼容性问题。通常，IE11不支持ES6语法，比如箭头函数、const/let声明，以及模块导入等。Vue3默认使用了很多现代特性，如果不进行转译和polyfill处理，就会导致IE11无法解析代码，从而出现空白页面。 接下来，我应该检查用户的项目配置是否正确。首先，用户是否使用了正确的Babel配置来转译代码？通常需要安装@babel/preset-env并配置browserslist来包含IE11。然后，Vue3的某些依赖，比如vue-loader和@vue/compiler-sfc，可能需要特定版本支持。另外，polyfill的引入也很关键，尤其是core-js和regenerator-runtime，这些需要作为入口文件的首行导入，确保在应用代码之前加载。 然后，用户的项目可能没有在vue.config.js中正确配置transpileDependencies，将node_modules中的依赖也进行转译。因为有些依赖可能使用了ES6+语法，如果不转译，IE11同样无法识别。此外，public/index.html中的meta标签是否设置了正确的IE兼容模式，比如使用X-UA-Compatible来强制使用最高模式渲染页面。 另外，检查构建后的代码是否有ES6语法残留也是一个步骤。可以通过运行npm run build然后查看dist目录下的文件，或者使用在线工具验证。此外，IE开发者工具的控制台可能会有具体的错误信息，用户是否查看了控制台报错？常见的错误如语法错误或未定义的Promise等，这些都需要对应的polyfill。 最后，可能需要考虑用户是否在package.json中正确配置了browserslist，确保@babel/preset-env能够根据目标浏览器生成兼容代码。如果用户使用的是Vite，可能需要使用@vitejs/plugin-legacy插件来处理旧版浏览器的支持，因为Vite默认面向现代浏览器。 总结下来，解决步骤应该是：安装必要的polyfill，配置Babel和browserslist，确保所有依赖都被正确转译，检查HTML的兼容设置，以及验证构建后的代码。同时，提醒用户IE11已经停止支持，建议考虑兼容性更好的替代方案。</think>### Vue项目在IE11中显示空白页面的解决方案 #### 原因分析 1. **语法兼容性问题** IE11不支持ES6+语法（如箭头函数、`const/let`、模板字符串等），而Vue3默认生成的代码包含ES6+语法，需通过Babel转译[^1]。 2. **缺失Polyfill** IE11缺少现代API支持（如`Promise`、`Object.assign`），需通过`core-js`补充[^2]。 --- #### 解决步骤 1. **安装Polyfill依赖** ```bash npm install core-js regenerator-runtime ``` 2. **配置Babel转译** 在`babel.config.js`中添加： ```javascript module.exports = { presets: [ [&#39;@babel/preset-env&#39;, { useBuiltIns: &#39;entry&#39;, corejs: 3 }] ] } ``` 3. **引入Polyfill** 在`main.js`首行添加： ```javascript import &#39;core-js/stable&#39; import &#39;regenerator-runtime/runtime&#39; ``` 4. **配置Vue兼容性** 在`vue.config.js`中启用依赖转译： ```javascript module.exports = { transpileDependencies: true } ``` 5. **设置IE兼容模式** 在`public/index.html`的`<head>`中添加： ```html <meta http-equiv="X-UA-Compatible" content="IE=edge" /> ``` 6. **验证构建结果** 通过以下命令检查构建产物： ```bash npm run build ``` --- #### 补充说明 - **Vite项目适配** 若使用Vite，需安装`@vitejs/plugin-legacy`插件[^1]： ```bash npm install @vitejs/plugin-legacy --save-dev ``` 在`vite.config.js`中配置： ```javascript import legacy from &#39;@vitejs/plugin-legacy&#39; export default { plugins: [ legacy({ targets: [&#39;ie >= 11&#39;] }) ] } ``` - **浏览器支持建议** Microsoft已于2022年6月15日终止IE11支持，建议引导用户使用现代浏览器[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值