简单明了实现vue兼容到ie

2024-05-10 01:57:38

文章目录

cli2兼容
cli3兼容

兼容ie是真的头痛，一般我们现在只能考虑到10，大部分情况到11，到9一下，ajax的请求方式就需要兼容，

下面就来分 cli2，和cli3以上来讲述如何兼容ie

效果图：这是cli2的

cli3 的

cli2兼容

vue cli2 并没有将webpack的配置，影藏了，所使用的还是原本的webpack配置，所以我们就可以使用本来的webpack来配置兼容

先安装所需要的 babel

文档

安装

npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev

babel/core babel的核心库，帮助babel识别js代码转换成AST抽象语法树

babel-loader 只是类似作为webpack与babel直接通信的桥梁，并不能将es6语法转换成es5

@babel/preset-env 将es6的语法转换为es5

但是这个要注意babel的版本兼容问题，不然会运行报错 7.0之前的版本是没有@，之后都加上的@这个就是为啥百度的时候，有些看着有些没有

babel兼容

所以最好先把他们3个存在的全部卸载，然后重新安装

然后我们需要实现一些低版本的语法兼容，有些语法在低版本浏览器中不存在，这个时候，就需要这个包来自己实现，pormise，等语法

安装

npm install --save-dev @babel/polyfill

配置base.conf.js

module: {...rules: [{ test: /\.js$/, exclude: /node_modules/,loader: "babel-loader" ,options:{presets: [["@babel/preset-env",{useBuiltIns:'usage'}]]
}}]
}

cli3兼容

第一种，方式就是直接用babel/polyfill

笔者试了多种，发现就这样就行了

入口文件main.js顶部引入

import "@babel/polyfill";

如果感觉不保险，最好

在vue.config.js 配置一项

  chainWebpack: config => {// 新增config.entry.app = ['babel-polyfill', './src/main.js']
}

如此兼容的配置搞定了

简单明了实现vue兼容到ie相关推荐

html的vue项目怎么兼容ie,vue兼容IE报错怎么解决？解决方案分享
IE 页面空白报错信息此时页面一片空白报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...
vue遇到ie兼容问题如何处理_详解vue 兼容IE报错解决方案
IE 页面空白报错信息此时页面一片空白报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...
vue 检测ie版本_分析vue 兼容IE报错解决方案
这篇文章主要为大家详细介绍了分析vue 兼容IE报错解决方案,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! IE 页面空白报错信息 [图片暂缺 ...
也许开发需要的只是一份简单明了的表格
本人原先是一名移动端开发工程师,本来是要一条道走到黑,准备做个it大咖,结果事与愿违,走到了测试的道路上.今天介绍一件通信测试上发生的事. 公司为青海移动做个项目,处于系统测试阶段,对各个系统进行测试 ...
Vue 兼容 ie9 的全面解决方案
Vue 兼容 ie9 的全面解决方案参考文章: (1)Vue 兼容 ie9 的全面解决方案 (2)https://www.cnblogs.com/hejun210/p/9228081.html 备忘 ...
记一次解决 vue 兼容ie11 的问题
记一次解决 vue 兼容ie11 的问题参考文章: (1)记一次解决 vue 兼容ie11 的问题 (2)https://www.cnblogs.com/qq735675958/p/117757 ...
前端神器之Sublime Text2/3简单明了使用总结
为什么叫神器呢? 我总结如下: 第一:也是最重要的,它占内存很小(就如同notepad++那般迅速打开,所以那款其实也不错~).一般IDE比如WebStorm(它也是一款神器来着),Aptana(也比 ...
vue 兼容IE报错解决方案
vue 兼容IE报错解决方案参考文章: (1)vue 兼容IE报错解决方案 (2)https://www.cnblogs.com/candymanping/p/10195377.html 备忘一下.
Python面向对象编程(类编程)中self的含义详解(简单明了直击本质的解释)
以下是博主认为的对self讲解得比较透彻又简洁明了的资料. 上面的资料把这个问题说得简单明了,大家认真看一遍相信就对self有个深入的了解了. 总结一下: 在Python为面向对象编程中,成员函数被调 ...

最新文章

热门文章