vue.js - 解决vue-cli打包后自动压缩代码

当咱们用vue脚手架作完项目后，npm run build打包以后，

有没有查看源码，全是压缩好的。可是我就不想让它压缩，该怎么办呢？

困惑了几天，查了各类资料。终于终于...

来，上干货：

首先，咱们得了解一点点webpack的知识。

webpack中压缩js 的插件叫 uglifyjs-webpack-plugin，

压缩css 的插件叫 optimize-css-assets-webpack-plugin

而后咱们找到/build/webpack.prod.conf.js 文件，

而后你会发现：

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

而后咱们就能够在页面中搜索OptimizeCSSPlugin 和 UglifyJsPlugin 这两个关键词所在的地方

配置以下：

    // css 压缩代码，将下面代码注释掉
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),

   // 压缩js代码，将下面代码注释掉
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

只要将上面代码注释掉，npm run build 你就会发现，欧了。

而后是html 了，

配置以下：

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },

这里咱们将上面的 minify 改为 minify：false

是的，就能够了。