Vue.jsでサブディレクトリ内へデプロイするときの対応
ローカルで構築したVueプロジェクトを本番環境やステージング環境のサーバーにデプロイすると、ページが表示されないという現象が起こりました。ソースコードなどを調べてみると、ビルド後に生成されたjsファイルパスがドメインのルートを参照しており、404エラーとなっていたため読み込みができていないという状態になっていました。
デフォルト(ローカルホスト参照)では「http:localhost:8080」で表示されるようになっているため、ベースのURLにサブディレクトリが入る場合には設定してあげる必要があります。実際のビルド後のインデックスファイルには下記のようなソースURLになっていました。
【dist/index.html】※一部省略
・・・ <script src=/js/app.[hash].js></script></body></html> // ソースURLにサブディレクトリが含まれていないそこで、サブディレクトリを含めたURLを参照するように設定していきます。Vueプロジェクト直下(node_modulesやpackage.jsonと同階層)に「vue.config.js」という名前のファイルを新規で作成し、デプロイ先の環境に合わせて適宜、下記のような設定を記述します。 【vue.config.js】
module.exports = { publicPath: '/SUB_DIRECTORY_NAME', }そして「$ yarn build」でソースファイルをコンパイルし、distフォルダ内に生成されたインデックスファイルを参照してみますと、各ソースURLにサブディレクトリが入った形になっているのが確認できました。 【dist/index.html】※一部省略
・・・ <script src=/[SUB_DIRECTORY_NAME]/js/app.[hash].js></script></body></html> // ソースURLにサブディレクトリが入っているこれで、デプロイ先の環境にある設定したものと同じサブディレクトリ内にアップロードすれば、サブディレクトリを含めたURLで動作・表示ができるようになります。テスト環境やステージング環境などで必要になる場合もあるかと思いますが、その時にはこのような形で対応することになります。 (参考にさせて頂いたサイト) vue-cli 3で作成したVue.jsアプリをサブディレクトリで展開
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories