vue 不支持ie11解决方案

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

#vue #vue IE11+

本文详细介绍了如何通过在项目中安装并配置Babel和es6-promise库来确保ES6特性如Promise能在不支持这些特性的环境中运行。步骤包括在package.json中添加依赖，修改main.js文件引入polyfill，并在webpack配置中加入入口文件。

npm i es6-promise

npm install --save babel-polyfill

 

package.json 文件中 添加

dependencies：{

    "es6-promise": "^4.2.4"

}，

devDependencies：{

    "babel-polyfill": "^6.26.0",

}

 

main.js 文件添加

import 'babel-polyfill'

import promise from 'es6-promise'

promise.polyfill()

 

build文件夹下webpack.base.conf.js

module.exports = {

    context: path.resolve(__dirname, '../'),

entry: {

    app: ['babel-polyfill', './src/main.js']

}

Vue3 - 不再支持 IE11，到底为什么？
🏆 前端领域优质创作者
11-15 4254
vue3官方文档，vue3不支持IE官方说明文档。Vue3不再支持IE11，vue3 不支持 IE11的本质，Vue 3 不再支持 IE11，Vue 3 将不会支持 IE11 了，喜大普奔,Vue 3 将不会支持 IE11 了，Vue 3 不再支持 IE 11!_Vite，尤雨溪:Vue 3 将不再支持IE11，Vue 3 计划放弃支持 IE11，Vue 3 计划放弃支持 IE11，Vue3 - 不再支持 IE11，到底为什么？
vue2兼容ie9浏览器
10-31
首先，IE9不支持ES6语法，因此我们需要将源代码转换为ES5。这通常通过使用Babel工具完成，Babel可以将ES6+的语法转换为浏览器可理解的ES5语法。要配置Babel，你需要在项目中安装`@babel/core`、`@babel/preset-env`...
vue在IE11版本上的问题
04-21
解决vue在IE11版本报错情况，vuex requires a Promise polyfill in this browser.需要下载babel-polyfill，在main.js中 import 'babel-polyfill'，修改webpack.config.js中的入口文件。ie11打不开vue项目，报错 “对象不支持“addEventListener”属性或方法”。
关于vue项目在IE11上遇到的兼容性问题
qq_43340606的博客
06-07 1288
2. Access-Control-Allow-Headers 列表中不存在请求标头 authorization。网上方案: Access-Control-Allow-Headers 的值去掉空格, 需要后端配合处理一下。解决: 在vue.config.js中配置transpileDependencies属性。1. chunk-vendors.js语法错误。分析: sockjs-client包的语法错误。
html引入vue不兼容ie11,Vue在IE11版本浏览器中的兼容性问题
weixin_35679331的博客
07-16 2588
一：Vue 2.x cli1、 使用vue2.0的项目在IE11版本浏览器中是空白的 或者路由跳转但是而页面显示依旧是上一个路径的页面元素 这是因为ie11不支持es6 而我们之前有使用的babel-loader 它仅是将es6的语法转为es5 却不会去转换es6的新属性 例如promise 所以此时我们需要使用到babel-polyfill 以下是具体操作方法首先用cnpm 安装...
Vue 3 不再支持 IE11
极客日报
04-06 1万+
近日，尤雨溪宣布一个提案，Vue 3 将不再支持 IE11。 原定投入 Vue 3 IE11 支持的精力将投入给 Vue 2.7，移植 3.x 兼容的新功能，包括： Composition API； < script setup > 以及其它新的单文件组件特性； emits 选项；TS 类型改进； Vite 官方整合。 至于为什么会拒绝支持 IE 11，尤雨溪谈到，从 Vue 3 开发伊始到2018 年底，就一直有开发者询问Vue3 是否会支持 IE 11这个问题。起初的计划是准备在 Vu
详解vue 兼容IE报错解决方案
01-19
IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法（如箭头函数），而...简单的说，兼容问题一般是IE 对于es6 的部分新对象、表达式，语法并不支持，解决方案是使用 babel-poly
Vue 2.0在IE11中打开项目页面空白的问题解决
12-09
问题的核心在于，Vue 2.0及其依赖库如Vuex可能使用了IE11不支持的新JavaScript特性，如Promise。Babel是一个广泛使用的JavaScript编译器，它默认只转换语法层面的新特性，但不会转换API级别的新特性，如Promise、...
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
在开发Vue项目时，遇到IE11浏览器白屏并报出`SCRIPT1002: 语法错误`的问题，通常是由于IE11不支持ES6语法导致的。Vue.js自身和许多现代JavaScript库广泛使用了ES6特性，而IE11并不完全支持这些新特性。以下是一些...
Vue兼容ie9的问题全面解决方案
08-27
Vue 兼容 ie9 问題全面的解决方案 Vue 是一个基于 JavaScript 的渐进式框架，用于构建用户界面和单页应用程序。然而，在使用 Vue开发项目时，需要考虑到浏览器的兼容性问题，特别是 ie9 及更低版本的浏览器。下面将...
Vue 3 不再支持 IE 11！
编程界明世隐的博客
04-06 5366
4 月 3 日，Vue 作者尤雨溪宣布：Vue 3 将不会支持 IE11。 总结 放弃Vue 3的IE11支持计划。 重点关注Vue 2.7的backport兼容特性。 尤神表示： 在漫长的开发过程中，也对IE11的兼容性进行了研究和实验，但由于涉及的复杂性和手头的其他工作的数量，所以被耽搁了下来； 最近重新审视IE11的问题时，浏览器和JavaScript已经发生了很大的变化。越来越多的开发人员开始使用现代语言功能，更重要的是，微软自己也开始通过对Edge的投资，积极推动用户远离IE，IE11
vue项目中遇到的一些IE11兼容性问题
qq_39704803的博客
06-23 539
IE微软都已放弃了，但客户要求兼容，没办法，做吧。 1.安装babel-polyfill和es6-promise .babel-polyfill（模拟ES2015以上的环境，主要用于对ES6新语法不支持的浏览器;） .es6-promise(若在项目中使用了ES6 promise对象，在360兼容模式、IE内核中不支持) cnpm i babel-polyfill -S //npm有时会安装不成功 cnpm i es6-promise -S 2.配置babel-polyfill和es6-pr
ant vue 兼容性问题_ie11 解决vue项目兼容性问题
weixin_39994438的博客
02-15 1073
最近项目尾声，需要做一些兼容性问题处理。其中最重要的自然是ie浏览器的兼容性问题了，于是便开始了网上查找兼容ie11旅程。网上的解决办法大都一致，便是让你安装babel-polyfill模块。使用babel-polyfill将vue项目中的es6语法的相关模块进行转译(转译成es5)。大致步骤是：1. 安装babel-polyfill, 方法： npm install babel-polyfill...
html引入vue不兼容ie11,关于vue.js:iview按需引入ie11不兼容报无效字符问题解决
weixin_28295799的博客
07-16 605
筹备工作//借助插件npm install babel-plugin-import --save-dev// .babelrc{"plugins": [["import", {"libraryName": "view-design","libraryDirectory": "src/components"}]]}在main.js中引入import "view-design/dist/styles/...
Vue.js项目在IE11白屏报错
热门推荐
光脚丫思考的专栏
10-26 2万+
本文总结了Vue.js项目在IE11浏览器中白屏报错，不显示任何内容的问题原因，以及可能的几种的解决方案。
记一次 解决 vue 兼容ie11 的问题
asdfgh0077的博客
11-26 274
记一次 解决 vue 兼容ie11 的问题
vue项目兼容ie11问题解决方案
筑梦人的博客
06-13 1万+
谷歌浏览器浏览正常,但是在ie11浏览器,qq浏览器(兼容模式),360浏览器(兼容模式),总是登录不了页面,有时能登录页面但是部分页面总是加载不出来,出现白屏现在,看控制台报出语法错误,但是项目中明明已经引入了, 有的页面还是提示语法错误,根据控制台提示还是提示语法错误,查看build完的js文件里面还是有es6语法,导致ie11不识别,检查关键字为element-ui关键字,于是解决方案...
当vue3不再支持IE
萝卜666的博客
07-09 4027
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 此外，JavaScript 允许自定义对象。 Object.assign()
如何友好提示vue3.0不再支持IE11及以下的浏览器版本
LiAly66的博客
03-15 4640
如何友好提示vue3.0不再支持IE11及以下的浏览器版本
IE11不兼容vue3解决方案
最新发布
07-21
### Vue3 兼容 IE11 的解决方案 Vue3 默认使用了现代的 JavaScript 特性，例如 `Proxy` 和 `Reflect`，这些在 IE11 上并不完全支持。然而，通过适当的配置和 Polyfill，可以实现 Vue3 在 IE11 上的兼容性。 #### 1. 使用 `@vitejs/plugin-legacy` 插件 Vite 提供了一个插件 `@vitejs/plugin-legacy`，它可以帮助生成兼容旧浏览器的代码。这个插件会生成两套代码：一套是现代浏览器使用的代码，另一套是兼容 IE11 的代码。在构建时，插件会自动检测浏览器特性并加载对应的代码。 ```bash npm install @vitejs/plugin-legacy --save-dev ``` 然后在 `vite.config.js` 中添加该插件： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import legacy from '@vitejs/plugin-legacy' export default defineConfig({ plugins: [ vue(), legacy({ targets: { ie: '11' }, additionalLegacyPolyfills: ['regenerator-runtime/runtime'] }) ] }) ``` #### 2. 引入必要的 Polyfill 由于 IE11 不支持 `Proxy`、`Reflect` 等现代 JavaScript 特性，需要引入 Polyfill 来填补这些缺失的功能。可以使用 `core-js` 或 `regenerator-runtime` 来提供兼容性支持。 ```bash npm install core-js regenerator-runtime ``` 在 `main.js` 或入口文件中引入 `core-js/stable` 和 `regenerator-runtime/runtime`： ```javascript import 'core-js/stable' import 'regenerator-runtime/runtime' import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` #### 3. 配置 Babel 为了确保 Vue3 代码能够被转译为兼容 IE11 的 JavaScript，需要配置 Babel。确保 `@babel/preset-env` 的目标浏览器配置中包含 IE11，并且启用 `useBuiltIns` 来自动引入 Polyfill。 在 `babel.config.js` 中配置如下： ```javascript module.exports = { presets: [ [ '@babel/preset-env', { targets: { ie: '11' }, useBuiltIns: 'usage', corejs: 3 } ] ] } ``` #### 4. 避免使用 Vue3 的 `Proxy` 特性 Vue3 的响应式系统默认使用 `Proxy` 来实现，而 `Proxy` 在 IE11 上无法完全支持。可以通过限制 `reactive` 的使用，或者改用 `ref` 来避免这个问题。在某些情况下，可以手动降级到 Vue2 的响应式系统，但这可能会导致部分 Vue3 特性无法使用。 #### 5. 处理 CSS 兼容性问题 IE11 对现代 CSS 特性的支持有限，例如 `flexbox`、`grid` 等。可以通过使用 `postcss` 插件 `autoprefixer` 来自动添加浏览器前缀，确保样式在 IE11 上正常显示。 安装 `autoprefixer` 和 `browserslist`： ```bash npm install autoprefixer browserslist --save-dev ``` 在项目根目录下创建 `.browserslistrc` 文件： ``` ie 11 ``` 然后在 `postcss.config.js` 中添加 `autoprefixer`： ```javascript module.exports = { plugins: { autoprefixer: {} } } ``` #### 6. 测试与调试 在开发过程中，使用 IE11 的开发者工具（F12）进行调试非常重要。通过查看控制台输出，可以快速定位 JavaScript 或 CSS 的兼容性问题。此外，确保所有依赖库也支持 IE11，避免第三方库引入的兼容性问题。 ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值