vue-cli3.0+ 兼容 ie 及 es6+api问题记录

917 阅读1分钟

问题背景

最近在做售货机安卓内嵌 内嵌前端页面。开发测试都没啥问题。结果你们知道的:上线前打包测试,what ? 安卓 5.0 的主板。 当时心里真是一万个*&……%¥……%。然后本地起个服务器看下打包后文件,控制台 语法错误!眼熟没?没错,就是 微软都放弃的 IE 的控制台出现的问题。

使用版本:

  • vue-cli 3.8.0
  • 谷歌浏览器75+
  • IE 11+

测试:

第一步:为了保持纯粹,我直接使用 vue-cli 生成一个项目 ![生成项目](https://github.com/huangd-d/pic/raw/master/08-19/20190819170001.png)
第二步:写一个es6+api 然后打包放在 IE,下面看。 ![api](https://github.com/huangd-d/pic/raw/master/api.png)
第三步:IE 查看: ![warning](https://raw.githubusercontent.com/huangd-d/pic/master/warning.png)

各位看官 我们如愿以偿的看到我们多么熟悉的页面。

处理兼容:

网上看了很多方法,但是我感觉没有说到具体点。直到一篇:core-js ;
说了这么多直接干货上:

  1. yarn add regenerator-runtime,及yarn add core-js(第一个坑,vue-cli 自带的是2+的包,我们需要先移除core-js 再安装,需要使用 core-js3.0+的包)。
    ![pic](https://github.com/huangd-d/pic/raw/master/08-19/page.png)
  2. main.js: import "core-js/stable"; import "regenerator-runtime/runtime";
  3. 打包测试,完美。IE 正常出现结果 (图片不知怎么上传不了了,后面再添加吧。 如果有问题欢迎留言,)

结语

百度真的很坑,给很多自相矛盾的结论。走了很多弯路。很早以前处理过,没有记录。结果又重新走了一遍,大龄程序员记性跟不上啊!