vue 兼容IE解决方案, Babel .babelrc
阅读目录
- IE 页面空白
- 报错原因
- Polyfill 是什么
- 解决方案
- 总结
回到目录
IE 页面空白
报错信息
此时页面一片空白
回到目录
报错原因
Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法。
例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁)的技术。
简单的说,兼容问题一般是IE 对于es6 的部分新对象、表达式,语法并不支持,解决方案是使用 babel-polyfill 来正常使用ES6。
回到目录
Polyfill 是什么
举个例子,有些旧浏览器不支持 Number.isNaN方法,Polyfill就可以是这样的:
if(!Number.isNaN) {Number.isNaN = function(num) {return(num !== num);} }
Polyfill就是类似这样解决API的兼容问题
回到目录
解决方案
1、使用babel-polyfill
引入 babel-polyfill
npm i -S babel-polyfill
如何使用
使用它时需要在你应用程序的入口点顶部或打包配置中引入。
在main.js 引入
import 'babel-polyfill'
或者在config中的 webpack.base.conf.js中 修改配置
entry:{app:['babel-polyfill','./src/main.js'] }
2、在index.html 加入以下代码(非必须)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3、babel-loader 中指定模块转码
增加了poly-fill还是报错,这一般是使用了第三方的ui框架、库、插件等,并且这些ui框架、库、插件底层有es6的语法。
找到webpack.base.conf.js 中的babel-loader
比如我这里用了element-ui 跟 v-charts 修改成如下:
{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'),resolve('test'),resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/v-charts/src'),resolve('node_modules/vue-awesome'),resolve('node_modules/element-ui/packages'),resolve('node_modules/element-ui/src')] }
4、打包问题
如果是webpack代码打包出错,一般到 github webpack Issues 中可以找到答案
这个错误是因为webpack-dev-server 版本问题
5、Babel 配置 .babelrc文件
.babelrc是Babel的配置文件,放在项目根目录下。一般情况下.babelrc文件不需要修改,如果以上都做了,还是报错,可以看下官网文档来配置下该文件
在项目使用 vue-cli 生成的代码中,根目录有一个 .babelrc 文件。在默认生成的模板内容中,增加 "useBuiltIns": "entry" ,这是一个指定哪些内容需要被 polyfill(兼容) 的设置
useBuiltIns 有三个设置
- false - 不做任何操作
- entry - 根据浏览器版本的支持,将 polyfill 需求拆分引入,仅引入有浏览器不支持的polyfill
- usage - 检测代码中 ES6/7/8 等的使用情况,仅仅加载代码中用到的 polyfill
{"presets": [["env", {"modules": false,"useBuiltIns": "entry"}],"stage-2"],"plugins": ["transform-runtime", "transform-vue-jsx"],"env": {"test": {"presets": ["env", "stage-2"],"plugins": ["istanbul"]}} }
具体相关可以查看Babel官网:https://www.babeljs.cn/
回到目录
总结
1、用vue 写的项目最多可以兼容到IE9 及以上版本
2、使用 babel-polyfill
3、在babel-loader中指定需要转码的第三方的ui框架、库、插件路径
4、配置 .babelrc文件
5、Babel 是一个厉害的东西 https://www.babeljs.cn/
vue 兼容IE解决方案, Babel .babelrc相关推荐
- Vue 兼容 ie9 的解决方案
Vue 兼容 ie9 的全面解决方案 一.兼容IE主要是从以下几个方面考虑 es6语法兼容 Number对象es6新方法兼容 requestAnimationFrame方法兼容 axios Promi ...
- 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 页面空白 报错信息 [图片暂缺 ...
- Vue 兼容 ie9 的全面解决方案
Vue 兼容 ie9 的全面解决方案 参考文章: (1)Vue 兼容 ie9 的全面解决方案 (2)https://www.cnblogs.com/hejun210/p/9228081.html 备忘 ...
- vue 兼容IE报错解决方案
vue 兼容IE报错解决方案 参考文章: (1)vue 兼容IE报错解决方案 (2)https://www.cnblogs.com/candymanping/p/10195377.html 备忘一下.
- 记一次 解决 vue 兼容ie11 的问题
记一次 解决 vue 兼容ie11 的问题 参考文章: (1)记一次 解决 vue 兼容ie11 的问题 (2)https://www.cnblogs.com/qq735675958/p/117757 ...
- echarts在360中以及IE8浏览器不兼容:解决方案
echarts在360中以及IE8浏览器不兼容:解决方案 参考文章: (1)echarts在360中以及IE8浏览器不兼容:解决方案 (2)https://www.cnblogs.com/Unrmk- ...
- jquery remove()不兼容问题解决方案
jquery remove()不兼容问题解决方案 参考文章: (1)jquery remove()不兼容问题解决方案 (2)https://www.cnblogs.com/Marydon2017030 ...
- vue init失败解决方案-终极版
vue init失败解决方案-终极版 参考文章: (1)vue init失败解决方案-终极版 (2)https://www.cnblogs.com/suger-life/p/8084368.html ...
最新文章
- OpenStack Neutron浅析(一)
- Linux常用系统备份、恢复命令
- java技术栈有哪些_Java程序员必备的21个核心技术,你都掌握了哪些?
- 小甲鱼python课后题答案_Python 小甲鱼教程 课后练习44
- 恢复Win10照片查看器
- 交换排序之冒泡排序和快速排序
- python入门经典-Python入门经典
- 【转载】spring mvc 使用session
- UGUI直接修改Image的Color和用unity自带的UI Shadr修改_Color属性的区别
- 304 Not Modified 的意思 (Web的Cache问题)
- django pdf转html5,pytho pdfkit 将网页django2.0教程内容打印成pdf文档
- 七年布局Cloud OS,微软将再创云产业新高
- QCC303x调试笔记-修改自定义提示音
- 从零学Java(10)之方法详解,喷打野你真的没我6!
- Lab: Blind SQL injection with time delays and information retrieval:时间延迟盲注和信息检索两个靶场复盘
- 三星发布家用microLED电视,LG感到压力很大
- 命令行的迅雷,这样用会更香
- 神经网络中矩阵求导术的应用
- 怎么学python入门?python新手学习路线
- 从零开始部署Node.js服务至阿里云ECS服务器并通过express框架实现外网IP访问html项目