vue-cli3 打包時使用‘babel-loader’遇到Cannot assign to read only property ‘exports’ of object '#'問題的解決方法。

原文連接：http://www.pianshen.com/article/9677274805/

 

第一種緣由就是import和module.exports的混用要知道commonJS和ES6的語法是不太同樣的前者是require和module.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文件

解決方法：

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

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

以vxe-table 兼容ie9的部分配置

1.安裝依賴

npm install -D babel-loader @babel/core @babel/preset-env webpack

2.配置vue.config.js

module.exports = {
  // ...  
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          // exclude用上面配置的話，默認是過濾不編譯node_modules 路徑下的文件
          // exclude: /(node_modules|bower_components)/,
          // include 指定須要編譯的路徑
          include: [
            resolve('src'),
            resolve('node_modules/xe-utils'),
            resolve('node_modules/vxe-table'),
            // resolve('node_modules/vxe-table-plugin-iview'),
          ],
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  },
  // ...
}

2.修改babel.config.js

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

3.Chrome 及 ie9 展現效果