Use 'babel-loader' vue-cli3 when packed encounter Can not assign to read only property 'exports' of the solution object '#' problems.

Original link: http://www.pianshen.com/article/9677274805/

 

The first reason is that the mix of import and module.exports to know commonJS ES6 and grammar are not the same as the former is require and module.exports latter is the import and exports, when you mix these two syntax, webpack it will error, which is the first case. In order to make the compiled program can run in most browsers.
webpack which has a compiler called Babel, responsible for ES6 language into commonJS to be compatible with most browsers. When you mix these two syntax you can use the babel of commonJS mode to help you compile import to require.
  However, the second case is when you want to use @ babel / plugin-transform-runtime when the plug-in, and you have to use this plug-in a commonJS written document, babel will default this file is ES6 your file, and then on the use of import to import this plug-in, resulting in the first case and the same mix wrong. The workaround is to configure unambiguous set babel.config.js, let babel and webpack as strict distinction commonJS ES6 files and file

Solution:

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

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

In vxe-table compatible portion is arranged ie9

1. install dependencies

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

2. Configure vue.config.js

= module.exports {
   // ...   
  configureWebpack: { 
    Module1: { 
      the rules: [ 
        { 
          Test: /\.m?js$/ ,
           // the exclude with the above configuration, the default filter is a file path is not compiled node_modules 
          / / the exclude: / (the node_modules | bower_components) /, 
          // the include path specified need to compile 
          the include: [ 
            Resolve ( 'the src' ), 
            Resolve ( 'the node_modules / XE-utils' ), 
            Resolve ( 'the node_modules / VXE-Table' ) ,
             // Resolve ( 'the node_modules / VXE-Table-plugin-iView'), 
          ], 
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  },
  // ...
}

2. Modify babel.config.js

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

3.Chrome ie9 and display of results