Vue项目兼容IE11

已于 2024-10-17 16:43:01 修改
阅读量2k 收藏 37
点赞数 36
文章标签： vue.js 前端 javascript edge浏览器
于 2024-10-17 16:41:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_74079648/article/details/143022845
版权

配置Vue项目兼容IE11详解

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但对于 IE9+，Vue 底层是支持。

由于开发过程中，我们经常会使用一些第三方插件或组件，对于这些组件，有时我们需要做一些处理。下述主要阐述如何使用 vue-cli5 脚手架搭建的工程支持 IE11。

IE11 打开 Vue 工程（Vue CLI）构建而来出现空白页，控制台告警、报错。

如：

  • DOM7011: 此页上的代码禁用了反向和正向缓存
  • HTML1300：进行了导航
  • app.js 各种语法错误

image-20241017160350502

browserslist

在项目中 package.json 文件里新加一个 browserslist 字段 (或新建一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被vue自带的@babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

  • @babel/preset-env：将你使用最新 JavaScript 语法，灵活的转化为目标浏览器所支持的 polyfill。
  • Autoprefixer：PostCSS 插件，为浏览器增加前缀。

我这里使用的是自己创建的.browserslistrc文件

image-20241017160651078

last 2 versions
> 1%
not ie <= 8

  1. “1%”：

    • 表示全球超过1%人使用的浏览器。这是一个动态的标准，随着浏览器使用情况的变化而变化。通过使用这个查询条件，可以确保项目兼容那些使用人数较多的主流浏览器。

  2. “last 2 versions”：

    • 表示所有浏览器兼容到最后两个版本。这意味着无论是什么浏览器，项目都会兼容其最新的两个版本。这有助于确保项目能够利用浏览器的最新功能和性能改进，同时仍然兼容较新的旧版本。

  3. “not ie < 11”：

    • 表示排除IE浏览器版本小于11的所有版本。由于IE8及以下版本不支持Vue等现代前端框架所使用的ECMAScript 5特性，因此这个查询条件通常用于确保项目不兼容这些过时的浏览器版本。同时，它也表明项目将兼容IE11及更高版本的IE浏览器（尽管IE11本身也存在一些兼容性问
最低0.47元/天 解锁文章
getaxiosluo
关注
vue兼容ie11（@babel/polyfill、core-js@3两种方式）
qq_34458968的博客
09-09 1万+
vue兼容ie11（@babel/polyfill、core-js@3两种方式）
关于vue项目兼容ie11那点事
郊眠寺
09-14 874
2022年了，是时候为自己的知识库加一些13效果出来了😏（当你分享给身边的人时一定是满眼的崇拜，多香），学过CSS基础的小伙伴心里肯定觉得太麻烦了，不想写（懒得写），没关系，今天我就带大家如何更简单的做一个动画效果，一定要看到最后喔。什么是自定义过渡的类名？简单描述一下，就是Vue官方团队为了方便大家不用在 css 中写样式类，直接在DOM就可以使用，看官网介绍简单解释一下吧(偷个懒)enter-class 相当于上面提到的 v-enter。
Vue项目与IE浏览器的兼容性分析(Vue|ElementUI)
警警的博客
11-04 2030
Vue+ElementUI项目与IE浏览器的兼容问题，IE9及以上（vue2）,vue3不支持IE。可利用Polyfill解决ES6语法在IE浏览器语法不兼容问题，可以用条件注释与样式覆盖解决IE中不匹配问题
Vue项目兼容IE浏览器
最新发布
qq_70546613的博客
04-29 399
*可兼容IE内核的浏览器：**360浏览器、edge浏览器。
Vue.js 框架兼容 Internet Explorer (IE) 浏览器指南
qq_42072014的博客
08-06 1648
通过以上步骤，你现在已经了解了如何确保Vue.js应用在IE11浏览器上正常运行。需要注意的是，支持IE可能会增加额外的工作量，尤其是在处理一些现代Web API时。如果可能的话，考虑逐步减少对IE的支持，转而专注于现代浏览器，以简化开发流程并提高应用性能。
vue 项目兼容 IE 浏览器
weixin_43749669的博客
12-16 5477
前言 : 网上 找了很多关于 vue项目兼容 IE 浏览器的 教程步骤 , 写的 非常详细 , 但根据我自己的项目,怎么找 都没有找到 webpack.base.conf.js 这个文件 ,就没办法配置。因为 vue-cli最新版本原因 , 隐藏了配置文件, 所有的 都在 vue.config.js中配置。到这 就完美结束 , IE 就能完美运行 起来了, 希望对你有所帮助 , 欢迎留言, 共同进步!: (具体是干嘛的 我还没弄明白,大神如果知道可留言解答!
VUE项目IE11兼容问题及处理方案
wushijuewu
05-11 8809
一、现状 近些年，随着移动端的发展，前端技术也发生了翻天覆地的变化，尤其是ECMAScript标准的不断升级，从es2015一直到最新的es2021，各种各样的前端javascript的特性被定义和推广，各个浏览器的厂商为了市场占比和用户体验的提升也在进行着一轮一轮的优化升级，目前的主流浏览器已经支持大部分的es2015的特性。在面向c端用户，移动作为主流的今天，PC端的C端用户量及使用频率都在急剧萎缩，但是对于面向PC端的B端用户为主的站点，移动化似乎无法替代PC。这里面仍然牵涉着很多兼容性问题，尤其是
解决vue2项目在IE11浏览器中无画面的兼容问题
qq_45496282的博客
08-21 3804
当前项目面临其他浏览器都可以运行，但是在IE11浏览器中出现白屏的现象，F12后台也没有报错，项目月底也要交付了。当前项目的vue版本为2.6.11，cli的版本为3。。自己捣鼓了两天没搞出来，后来又喊了一位大神才用了大半天的时间解决了此问题。
vue项目兼容ie11问题解决方案
筑梦人的博客
06-13 1万+
谷歌浏览器浏览正常,但是在ie11浏览器,qq浏览器(兼容模式),360浏览器(兼容模式),总是登录不了页面,有时能登录页面但是部分页面总是加载不出来,出现白屏现在,看控制台报出语法错误,但是项目中明明已经引入了, 有的页面还是提示语法错误,根据控制台提示还是提示语法错误,查看build完的js文件里面还是有es6语法,导致ie11不识别,检查关键字为element-ui关键字,于是解决方案...
vue项目兼容ie11的配置
love_dzq的博客
06-03 2495
由于下载的依赖包很多是不兼容ie的(比如箭头函数等)，所以第一步就要babel把依赖的代码 编译了！！！在src根目录vue.config.js下 在src根目录.browserslistrc下 在src根目录babel.config.js下 在main.js下 在package.json下 如果报错：[vuex] vuex requires a Promise polyfill in this browser.在这个浏览器中vuex需要Promise填充。在public的index.h
vue2兼容ie9浏览器
10-31
总之，使Vue 2应用兼容IE9主要涉及ES6语法转换、Promise polyfill、Object.defineProperty的处理以及选择兼容的第三方库。这需要对前端构建工具和浏览器兼容性有深入的理解，并且可能需要在开发过程中不断调整和测试...
vue项目系统兼容IE浏览器问题以及解决方案
热门推荐
qq_26887683的博客
05-16 2万+
系统兼容IE浏览器问题以及解决方案 问题 vue项目在IE浏览器上运行时会出现兼容性问题：JavaScript语法报错，css样式错乱。原因是在IE（以IE11为例）浏览器下，部分js的写法需要改变，部分样式在IE浏览器上不支持，以及一些IE浏览器特有的问题。 vue 只兼容ie8以上版本； IE 不兼容 axios的promiss对象; IE 不兼容es6语法； 解决方案 下载对应插件包解决js兼容性问题：babel-polyfill，es6-promise以及 babel-plugin-
vue项目兼容ie
前端学习分享
03-11 1239
vue项目兼容ie
Vue项目中IE11兼容性问题记录
日暮斜阳
04-01 954
（1）安装 babel-polyfill。babel-polyfill可以模拟ES6使用的环境，可以使用ES6的所有新方法（2） 配置 babel.config.js(3) 在每个入口文件上方添加(4) 重启项目默认情况下babel-loader会忽略所有node_modules 中的文件。如果想显式转义一个依赖，可以配置transpileDependencies。
vue项目兼容ie浏览器
rain_c°雨
05-07 7656
注意： vue 只兼容ie8以上版本； IE 不兼容 axios的promiss对象; IE 不兼容es6语法； ES6转ES5 一、关于babel-polyfill 1、说明：This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded whe.
vue 兼容ie11 360
weixin_45279761的博客
07-02 340
前提： 项目在 谷歌上完美运行，到ie 或者 360 上运行不了， 或者样式丢失 安装插件 npm install babel-polyfill main.js 中引入 import BabelPolyFill from "babel-polyfill"Vue.use(BabelPolyFill) .webpack.dev.conf.js 中添加 entry: { // app: './src/main.js' app: ['babel-polyfill', './src/main.js'] },, 原
vue 兼容ie11以上
YYamchao的博客
04-13 398
config.entry('main').add('babel-polyfill') //main.js是入口js文件。import "babel-polyfill" // main.js 首位。3..browserslistrc 文件。4.babel.config.js 文件。5.vue.config.js 文件。
Vue项目兼容IE解决方案：browser.min.js压缩包
考虑到标题中提到了“vue.js项目兼容ie必备”，我们可以合理推断这个polyfill库包含了实现那些在IE浏览器中不支持或者与标准存在差异的ECMAScript和Web API的功能。 在这个场景中，IE浏览器是众所周知的对现代Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值