vue-cliで作成したアプリケーションをサブディレクトリ上に展開する

vue-cli

github.com

やりたいこと

vue-cliで作成したアプリケーションをサブディレクトリ /test-dir/ に展開したい。

問題

デフォルトの設定でプロダクションビルドし、

$ npm run build

webサーバから {vue-cli-project}/dist/ を参照するようにしたが、このままではパスの問題でアプリケーションが動かなかった。

解決

config/index.js に assetsPublicPath という設定項目がある。この値をvue-cliアプリケーションのルートとなるサブディレクトリパスに書き換えて、 再度ビルドすれば良い。

assetsPublicPath: '/test-dir/',

さらに、vue-router を使ってルーティング設定を行っている場合は、そちらにも設定が必要となる。 コンストラクタオプションの'base' に、サブディレクトリの設定を行う。

ルーターコンストラクタオプション · vue-router

new Router({
  base: '/test-dir/',
  ...
})