vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)

vue-cli4.x默认情况下不需要自己手动安装babel-polyfill,我们看一下官网介绍。

vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)_第1张图片

我们可以发现,与umi2.x之后一样,vue也支持一键配置需要兼容的浏览器

vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)_第2张图片

我们只需要在package.json中添加自己需要的浏览器即可。具体的指定范围请点击这里。

但是仅仅这样还是不够的

虽然正常情况下这样就可以直接兼容,但是官方也做过说明

vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)_第3张图片

有很多开发人员会遇到安装了babel-polyfill或者像上述一样做过之后依旧会报错

这时候很有可能就是因为你的依赖包并没有被检测出来并进行语法转换,而恰好你的依赖包不支持IE浏览器

就像官网所说

vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)_第4张图片

我们先直接打开项目在IE浏览器中运行看看能不能找到错误

我这个项目是使用vue-cli4.x版本创建的项目

vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)_第5张图片

在IE浏览器中运行

果不其然,报错

这个时候不要慌,先点开错误看一下

vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)_第6张图片

找到错误的最后一行,我们可以看到错误的依赖包

这个时候需要

显式的将这个依赖包放到vue.config.js中的transpileDependencies中去,告诉babel需要转换这个包

再次运行

还是有错,继续点开继续看

发现还有没有转换的包

继续上述步骤

以此类推,直到所有不能转换的包都显式转换

vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)_第7张图片

大功告成

vue-cli4.x之后不需要手动安装babel/polyfill,vue-cli已经自带了

官网说明:https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage

browserslist里的东西不能省略,并不是说自己配置就不用在里面写需要兼容的浏览器,哪怕像官网所说的引入所有的polyfill一样,也是需要配置的

vue-cli 4.x适配IE浏览器(SCRIPT1002:语法错误)_第8张图片

如有不对,请指正,谢谢

你可能感兴趣的:(Vue,vue-cli)