當我們用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

是的，就可以了。

vue.js - 解決vue-cli打包後自動壓縮代碼