vue兼容IE报错怎么解决?解决方案分享

IE 页面空白
报错信息

vue兼容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就可以是这样的:
vue兼容IE报错怎么解决?解决方案分享

文章插图
Polyfill就是类似这样解决API的兼容问题
解决方案
1、使用babel-polyfill
引入 babel-polyfill
vue兼容IE报错怎么解决?解决方案分享

文章插图
如何使用
使用它时需要在你应用程序的入口点顶部或打包配置中引入 。
在main.js 引入
vue兼容IE报错怎么解决?解决方案分享

文章插图
或者在config中的 webpack.base.conf.js中 修改配置
vue兼容IE报错怎么解决?解决方案分享

文章插图
2、在index.html 加入以下代码(非必须)
vue兼容IE报错怎么解决?解决方案分享

文章插图
3、babel-loader 中指定模块转码
增加了poly-fill还是报错,这一般是使用了第三方的ui框架、库、插件等,并且这些ui框架、库、插件底层有es6的语法 。
找到webpack.base.conf.js 中的babel-loader
比如我这里用了element-ui 跟 v-charts 修改成如下:
vue兼容IE报错怎么解决?解决方案分享

文章插图
如果是webpack代码打包出错,一般到github webpack Issues中可以找到答案
这个错误是因为webpack-dev-server 版本问题
vue兼容IE报错怎么解决?解决方案分享

文章插图
vue兼容IE报错怎么解决?解决方案分享

文章插图
5、Babel 配置 .babelrc文件
.babelrc是Babel的配置文件,放在项目根目录下 。一般情况下.babelrc文件不需要修改,如果以上都做了,还是报错,可以看下官网文档来配置下该文件
vue兼容IE报错怎么解决?解决方案分享

文章插图
vue兼容IE报错怎么解决?解决方案分享

文章插图
在项目使用 vue-cli 生成的代码中,根目录有一个 .babelrc 文件 。在默认生成的模板内容中,增加 "useBuiltIns": "entry",这是一个指定哪些内容需要被 polyfill(兼容) 的设置
useBuiltIns 有三个设置
false - 不做任何操作
entry - 根据浏览器版本的支持,将 polyfill 需求拆分引入,仅引入有浏览器不支持的polyfill
usage - 检测代码中 ES6/7/8 等的使用情况,仅仅加载代码中用到的 polyfill
vue兼容IE报错怎么解决?解决方案分享

文章插图
总结
1、用vue 写的项目最多可以兼容到IE9 及以上版本
2、使用babel-polyfill
3、在babel-loader中指定需要转码的第三方的ui框架、库、插件路径
4、配置 .babelrc文件
5、Babel 是一个厉害的东西
补充:
问题:ie浏览器autoprefixer自动补全css前缀无效
解决方法:
ie发现使用内联样式,autoprefixer无法生效,所以需要写到style标签内 。
问题:ie10打开包语法错误,如图所示

推荐阅读