Vue-cli3项目兼容ie11 的各种配置及错误解析

vue.config.js 里面有一个针对node_modules里面的插件转码的字段

transpileDependencies: ['multi-download']
这个字段可以针对性对node_modules里面的特定内容进行转码,数组里面放的就是需要转码的插件

如果遇见部分es6语法无法转es5或者promise async/await 等方法无法转码,则需要安装babel-polyfill 并在main.js中引入(f放在引入vue之前)
然后在babel.config.js中配置

module.exports = {
  presets: [
    '@vue/app'
  ],
  sourceType: 'unambiguous'
}

当然我这个是因为报了Cannot assign to read only property ‘exports’ of object '#'这个错误才添加的sourceType
根据我在网上搜到的一篇文章,把造成这类错误的原因分为两大类
第一种就是import 和 module.imports 的混用,因为commonJs和es6的语法是不太一样的,前者是require和modules.exports,后者则是import和exports,当你混用这两个语法的时候,webpack就会报错,也就是第一种情况。
为了使编译好的程序能在大多数浏览器下运行。webpack里面有一个编译器叫Babel,负责把ES6的语言转化为commonJS以兼容绝大多数浏览器。当你混用这两个语法的时候你可以使用babel的commonJS模式帮你把import编译成require。
  然而第二种情况就是你要使用@babel/plugin-transform-runtime这个插件的时候,同时你又在某个commonJS写的文件里使用这个插件时,babel会默认你这个文件是ES6的文件,然后就使用import导入了这个插件,从而产生了和第一种情况一样的混用错误。解决方法是在babel.config.js里配置unambiguous设置,让babel和webpack一样严格区分commonJS文件和ES6文件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值