素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【baseUrl】Vue-CLI3でルートディレクトリ以外にデプロイしたい場合のURLを置き換える方法【publicPath】

投稿日: 2019年9月25日
最終更新日:

スポンサーリンク

336×280




Vueプロジェクトをサブディレクトリにデプロイしたい

サイトなどを製作している場合、基本的にはhttp://localhost/{アプリケーション}の形で開発及び動作確認を行うと思います。

そして、いざ実装が終わりデプロイするぞ!!となった場合、レアケースですが、
「ルートじゃなくてサブディレクトリに配置して。」
と言われる事が稀にあります。笑

要件定義の時に確認しとけや!
という点は一旦置いといて、そんな急な要望が出た場合にもVue-cliを使ってプロジェクトを作っていれば柔軟に対応が可能になります。

手順

vue.config.jsの作成

まずはプロジェクトルートにvue.config.jsを作成しましょう。

baseUrlを追加

次にvue.config.jsに以下の記述を追加してください。

assetsPublicPathは廃止

Vue-CLI 2系の場合はassetsPublicPathで指定していましたが、キー名が変わったので要注意です。

確認

では、実際に起動してみましょう。

正常にbaseUrlが適用された状態で起動されました。

HTML内のリンクにもbaseUrlの値が差し込まれています。

baseUrlも廃止予定

無事に期待通りの動きが出来ましたが、ログに気になる文言が出力されていました。

なにやら、baseUrlは非推奨なのでpublicPathを使ってね!との事です。

publicPathに変更

という事で言われた通りにbaseUrlpublicPathに変更しましょう。

指定の仕方は同じです。

確認

では再度実行してみましょう。

無事、警告も消えて綺麗なログになりましたね♪

本日のオススメ商品

終わりに

以上のように、Vue-CLIを使っていれば急なデプロイ要望にも柔軟に対応する事が出来ました。

お困りの際はお試しください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , , ,

blogenist

Author: blogenist