記一次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的原因？