html的vue项目怎么兼容ie,vue兼容IE报错怎么解决?解决方案分享

IE 页面空白

报错信息

42741555dddad501df604bc9fc9a1dca.png

此时页面一片空白

报错原因

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就可以是这样的:

36bc6411d9b8a3c6d93015e3a433379a.png

Polyfill就是类似这样解决API的兼容问题

解决方案

1、使用babel-polyfill

引入 babel-polyfill

1a7a94f8588eef6d0909ad679b025314.png

如何使用

使用它时需要在你应用程序的入口点顶部或打包配置中引入。

在main.js 引入

34798d7fd48e1c571e86c9891a1ab84e.png

或者在config中的 webpack.base.conf.js中 修改配置

64bb6e5b929741c6490fbccd5018849a.png

2、在index.html 加入以下代码(非必须)

d487eb107fc909f2e80109f6f2bc88af.png

3、babel-loader 中指定模块转码

增加了poly-fill还是报错,这一般是使用了第三方的ui框架、库、插件等,并且这些ui框架、库、插件底层有es6的语法。

找到webpack.base.conf.js 中的babel-loader

比如我这里用了element-ui 跟 v-charts 修改成如下:

83d62c7c552d69d6fd16880d4a5330d4.png

如果是webpack代码打包出错,一般到github webpack Issues中可以找到答案

这个错误是因为webpack-dev-server 版本问题

111c6d003d6c299ea2669560971ca210.png490e25383d9ed199b4855ddb1b051391.png

5、Babel 配置 .babelrc文件

.babelrc是Babel的配置文件,放在项目根目录下。一般情况下.babelrc文件不需要修改,如果以上都做了,还是报错,可以看下官网文档来配置下该文件

b29ae5776d15d2818f1f45c47cbbbce8.png74d6e9e8d58f9ed722930eaa3b159854.png

在项目使用 vue-cli 生成的代码中,根目录有一个 .babelrc 文件。在默认生成的模板内容中,增加 "useBuiltIns": "entry",这是一个指定哪些内容需要被 polyfill(兼容) 的设置

useBuiltIns 有三个设置

false - 不做任何操作

entry - 根据浏览器版本的支持,将 polyfill 需求拆分引入,仅引入有浏览器不支持的polyfill

usage - 检测代码中 ES6/7/8 等的使用情况,仅仅加载代码中用到的 polyfill

bd86c223679643990002db51567606c5.png

总结

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

2、使用babel-polyfill

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

4、配置 .babelrc文件

5、Babel 是一个厉害的东西

补充:

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

解决方法:

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

问题:ie10打开包语法错误,如图所示

3acc71bc8baf1b6d32f7735b9698cb36.png75c25932aafb404fb9db15ce7358e827.png

解决方法

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

1e72399f889cf85988b79b2b462f5fac.png861d0ac7c5d0dc54ecc0943ba29f6db9.png

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

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值