vue-cliでビルドした本番環境を、ルート以外で動かす

先日の記事、Vue.jsでmousedownとtouchstartのイベントを扱う | while(isプログラマ)で作成したプログラムなんですが、ビルドしたうえでvuejsフォルダをサーバに作ってアップして公開しようと思ったらうまく動きませんでした。

原因は単純に外部ファイルの指定が、「」とルートからの指定となっているため。開発環境はともかく、本番環境はこれだと困るということもあります。

そういう場合、プロジェクトのルートフォルダに、「vue.config.js」というファイルを作成して、下記のように設定。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vuejs/' : '/'
}

これは、本番環境では/vuejs/を基点としたファイル構成にし、開発環境ではルートを基点とするファイル構成ととらえるという指定です(参考：Configuration Reference | Vue CLI)。こういうことでビルド時に外部ファイルの参照が、「」となり、うまく動かすことができました。

前回作成したプログラム：MousedownとTouchstart