如何解决Vue在IE浏览器中兼容性报错的问题？

本文共计722个文字，预计阅读时间需要3分钟。

IE页面空白，报错信息：当前页面一片空白，报错原因+Babel+默认只转换新的JavaScript语法（如箭头函数），而不转换新的API（如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等）。

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 www.babeljs.cn/

总结

1、用vue 写的项目最多可以兼容到IE9 及以上版本

2、使用babel-polyfill

3、在babel-loader中指定需要转码的第三方的ui框架、库、插件路径

4、配置 .babelrc文件

5、Babel 是一个厉害的东西www.babeljs.cn/

补充：

问题：ie浏览器autoprefixer自动补全css前缀无效

解决方法：

ie发现使用内联样式，autoprefixer无法生效，所以需要写到style标签内。

问题：ie10打开包语法错误，如图所示

解决方法

点击app.js,跳转到报错的位置，如图

发现最后一行有个import的文件，所以锁定到错误肯定是在引入的这个文件内。

把common.js打开，检查语法，发现有个变量定义用了ES6的语法let。所以引入的文件，插件没有起作用。

没有将ES6转ES5。然后修改了之后，问题解决。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。