Vue CLIで作成したアプリを任意のディレクトリにデプロイ

プロジェクトディレクトリ直下にて、以下のコマンドを実行すると、distディレクトリにアプリで必要なファイル一式が作成されます。

$ npm run build

distディレクトリの中身を公開ディレクトリにコピーすれば、Vue.jsアプリを公開することができます。

しかし、公開ディレクトリのサブディレクトリでVue.jsアプリを実行したい場合、distディレクトリの中身をサブディレクトリにコピーしただけでは、必要なファイルが見つからず動かせません。

1. プロジェクトディレクトリ直下に、以下の内容でvue.config.jsというファイルを作成します。

module.exports = {                                                                  
    publicPath: 'アプリを配置するディレクトリの公開ディレクトリからの相対パス',
}

※公開ディレクトリが/www/htmlで/www/htmlディレクトリ直下のsub/aaaディレクトリにVue.jsアプリを置きたい場合は、publicPath: ‘/sub/aaa’
を設定する。

2. プロジェクトをビルドします。

$ npm run build

distの中身を丸ごと/www/html/sub/aaaにコピーする。