Vue CLI でビルドした時にルートパスになってしまう件の対処法

対処法が分かればすぐ解決できることだったので、メモです。

事象

Vue CLI でビルドしたファイルを Web サーバに配置して、確認！

あれ、画面が真っ白……。

コンソールには「こんな JS ファイルないよ！」というエラーが表示されていました。
HTML ファイルで指定している各ファイルパスが合っていないようです。

よくよく確認すると、相対パスで書いていたはずのものが、ルートパスに置き換わっていました。

// 相対パス
'./js/sample.js'  // ← こっちで書いたのに

// ルートパス
'/js/sample.js'   // ← こっちになっているのです…

Vue CLI では、特に指定していない場合は、ルートパスを指定する仕様のようです。
ドメイン直下に配置する場合は良いのですが、そうではない場合に困りますね…。

対処法

package.json と同じ階層に vue.config.js ファイルを作成します。
この vue.config.js ファイルに以下のコードを書きます。

module.exports = {
  publicPath: './'
}

そしてもう一度ビルドして適用。これだけです。簡単でしょう…？

割と時間を取ってしまった割に、3行のコードで解決できてしまいました。
未来の自分が忘れた時のために、ここに記録を残しておきます。