vue-cli 3で作成したVue.jsアプリをサブディレクトリで展開

vue-cli 3系で作成したVue.jsのアプリケーションを公開サーバのサブディレクトリにデプロイしようと思った際に疑問に思ったのでメモ。

というのは、Vue.jsの開発環境ではnpm run serveするとlocalhost:8080でアクセスできるようにルートディレクトリ扱いです。<%= BASE_URL %>もルートディレクトリとして展開されます。……このBASE_URLを公開サーバのサブディレクトリにするにはどうするか。

どうやらpackage.jsonのあるディレクトリにvue.config.jsというファイルを作成し、

module.exports = {
    baseUrl: '/hoge/piyo',
}

とすれば良いようです。これでnpm run buildしてみると……

 WARN  "baseUrl" option in vue.config.js is deprecated now, please use "publicPath" instead.

……おや?警告が出ています(ビルド自体は完了)。「baseUrlは非推奨になったのでpublicPathを代わりに使ってね」とのことなのでvue.config.jsのキーを書き換えます。

module.exports = {
    publicPath: '/hoge/piyo',
}

これでビルドしなおすとOKでした。

ということで、vue.config.jspublicPathを指定すると良いようです。

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。