Vue.jsのproductionビルドでミニファイしない方法(cssは除く)

背景

本番環境にアップする際に検証環境との差分を示さなければならないとのお達し・・・

ミニファイされていると1行になっているので比較が非常に見にくいので何とかしたい！

前提

Vue CLI 3を使用

方法

Vueに依存した話ではなく、単純にwebpack4の挙動だが、mode=productionでビルドするとデフォルトでミニファイされてしまう。

vue.config.jsに以下の部分を追記する

module.exports = {
  (略)
  configureWebpack: {
    (略)
    optimization: {
      minimize: false,
    },
  },
  (略)
}

これでjsに関してはOK。

HTMLもミニファイされてる・・・

HTMLにも環境別のURLを埋め込んでいたりするのでミニファイをしたくない・・・ これについては既に記事を書いておられる方が居て、このまんまいけました！

Vue CLI 3で、minifyされてないHTMLを書き出す方法

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(options => { // この'html'の部分は適宜修正
      options[0].minify = { 
        removeComments: false,
        collapseWhitespace: false,
        removeAttributeQuotes: false,
        collapseBooleanAttributes: false,
        removeScriptTypeAttributes: false
      }
      return options
    })
  }
}

CSSについては環境による差分は出ないようになっていたので今回は対応しませんでした。

まとめ

普通にミニファイした方が良いと思うので、コアなニーズだとは思いますが、誰か(未来の自分とかｗ)の役に立てば嬉しいです。