记一次vue项目ie兼容性问题

项目是使用公司自己的脚手架搭建的，其中引入了基于element-ui修改的ui框架。在ie中白屏显示，并且报错。

SCRIPT1028: SCRIPT1028: Expected identifier, string or number

查看公司文档后发现需要在vue.config.js中添加transpileDependencies参数配置

module.exports = {
  transpileDependencies: ['@pillarjs'],
};

因为babel默认只转义src中的文件，加上transpileDependencies后，可以为node_modules中的依赖开启转换。

本以为这就完事了，结果发现不仅ie没起作用，就连chrome都报错了。。。

chrome报错:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

ie报错:

Assignment to read-only properties is not allowed in strict mode

原因是import和module.exports混用了,所以webpack报错了。

查了半天网上的解决办法都没用，直到看到这篇文章。

在babel.config.js里面加unambiguous属性

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

让babel和webpack一样严格区分commonJS文件和ES6文件。

改完之后chrome正常了，edge浏览器也能看了但是ie还是不行。报错SCRIPT1002: 语法错误 chunk-vendors.js (9461,3),没办法只能点进去看到底是什么问题。

后来发现是element-ui和vue-particles的问题，于是在transpileDependencies中又添加了这两个依赖。

重启项目，ok了。但是很奇怪啊，为什么element-ui也需要加进去，别的使用element-ui的项目也没加，ie就可以看啊？难道是因为@pillarjs这个依赖使用了element-ui的原因？