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
- Vue.js(Composition API)+TypeScriptの環境でVuex・Vue Router・Axoisを使ってみる#1:環境構築
Vue.js(Composition API)+TypeScriptの環境でVuex・Vue Router・Axoisを使ってみる#1:環境構築
- メディアクエリを使わないレスポンシブコーディングを試してみる #1:カラムレイアウト
メディアクエリを使わないレスポンシブコーディングを試してみる #1:カラムレイアウト
- webpack+Reactの環境にTailwindCSSを導入してみる
webpack+Reactの環境にTailwindCSSを導入してみる
- Vue.js(Options API)からReactへの移行でみる違いと比較 #5:コンポーネント間で値の受け渡し(props)
Vue.js(Options API)からReactへの移行でみる違いと比較 #5:コンポーネント間で値の受け渡し(props)
- Vue.js(Options API)からReactへの移行でみる違いと比較 #4:イベントハンドリング・バインディング
Vue.js(Options API)からReactへの移行でみる違いと比較 #4:イベントハンドリング・バインディング
- Vue.js(Options API)からReactへの移行でみる違いと比較 #3:テンプレート処理
Vue.js(Options API)からReactへの移行でみる違いと比較 #3:テンプレート処理
- Vue.js(Options API)からReactへの移行でみる違いと比較 #2:メソッド・ステート
Vue.js(Options API)からReactへの移行でみる違いと比較 #2:メソッド・ステート
- Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
categories