Vue.js-fix vue-cli automatically compress code after packaging

When we finished the project with Vue Scaffolding, the NPM run build was packaged,

There is no view of the source code, all compressed good. But I don't want to let it compress, what should I do?

Puzzled for a few days, looked up all kinds of information. Finally, finally ...

Come on, dry:

First, we have to understand a little bit of webpack knowledge.

Webpack in the compression JS plug-in called Uglifyjs-webpack-plugin,

The plugin for compressing CSS is called Optimize-css-assets-webpack-plugin

Then we found the/build/webpack.prod.conf.js file,

Then you will find:

Const Optimizecssplugin = require (' optimize-css-assets-webpack-plugin '= require (' Uglifyjs-webpack-plugin ') )

Then we can search the page for Optimizecssplugin and Uglifyjsplugin, where the two key words are located.

The configuration is as follows:

 //  CSS compression code, comment out the code below  new   Optimizecssplugin ({cssprocessoroptions: Config.build.productionSourceMap ? {safe: true , Map: {inline: false  }}: {safe:  true  } }),

   // compress the JS code and comment out    the code below New Uglifyjsplugin ({      uglifyoptions: {        compress: {          false        }      },      SourceMap:config.build.productionSourceMap,      true    }),

Just comment out the above code, NPM run build and you'll find out, OU.

Then there's the HTML,

The configuration is as follows:

 new   Htmlwebpackplugin ({filename: Process.env.NODE_ENV  = = = ' testing '? ' index.html ' : Config.build.index, Template:  ' index.html ' 

Here we change the minify above into Minify:false.

Yes, I can.

Vue.js-fix vue-cli automatically compress code after packaging