Vue-cli3でbuild時の罠

多分3に限った話じゃないが、vue-cli3でbuild後、dist/を単純にデプロイするとページが表示されない。

consoleみるとcssやjsのファイルパスが軒並みnot foundだったので、パスを確認したら当たりだった。

どうやらデフォルトの設定だとbuild後パスの指定が

./js/app.js

みたいなルートからの相対パス指定でなく

js/app.js

になるようだ。

対策としては、vue.config.jsに以下の記述を加える。

/* vue.config.js */
module.exports = {
    publicPath: './',
}

ちなみにこのプロパティはcli2までは'baseUrl'が使われていたが、cli3からpublicPathが推奨になっている。