详解vue兼容IE报错解决方案_此网页上的代码禁用了反向资源-CSDN文库

46 浏览量 2020-10-17 14:05:18 上传评论收藏 64KB PDF 举报

资源推荐

资源详情

资源评论

详解详解vue 兼容兼容IE报错解决方案报错解决方案

主要介绍了详解vue 兼容IE报错解决方案，详细的介绍了几种原因及其解决方案，非常具有实用价值，需要的朋

友可以参考下

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: [

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

weixin_38682054

粉丝: 4
资源: 909

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip