Vue CLI 4・Vue 3 で出力ディレクトリを変更し相対パスにするメモです。

今回のバージョン情報

• Vue CLI
  • @vue/cli 4.5.13
• proset
  • Vue 3

以前の Vue CLI で baseUrl で指定していたことが変わったり、最新の Vue 3 の環境で出力ディレクトリを変更をしてみたかったので整理がてらやってみます。

やりたいこと

こんなフォルダ構造です。

app.js は、

const express = require('express');
const app = express();

// public というフォルダに入れられた静的ファイルはそのまま表示
app.use(express.static(__dirname + '/public'));

app.listen(8080);

console.log("server start!");
console.log("http://localhost:8080/");

のような express のプログラムです。

これをサーバーとして動かして /public/sub-dir/ のようなディレクトリに Vue CLI で生成された Vue 関連ファイルを http://localhost:8080/sub-dir/ 以下でうまく表示したいので、設定してみます。

Vue CLI で Vue プロジェクトを書き出し

制作するディレクトリのルートでVue CLI で Vue プロジェクトを書き出します。

vue create my-project

で

Default (Vue 3) ([Vue 3] babel, eslint) を選択してプロジェクトをつくります。

無事、作成されました。

ためしに、

cd my-project
npm run serve

してみると

無事表示されました。

Vue プロジェクト内で vue.config.js を作成

Configuration Reference のとおり、Vue プロジェクト内で vue.config.js の設定ファイルを設定していきます。

出力先を outputDir で変更する

module.exports = {
  outputDir: '../public/sub-dir'
}

/public/sub-dir/ に向けて保存するので my-project フォルダからの相対パスを vue.config.js に書き加えます。

npm run build

ビルドしてみると、

無事、 /public/sub-dir/ に出力されました。

サーバーを起動してみる

ということで、app.js を起動してうまく表示されるか見てみましょう。

cd ..

したあと、

node app.js

で起動して、 http://localhost:8080/sub-dir/ を見てみます。

真っ白で起動されず、

ルートパスで書き出されているので JS や CSS が呼べずうまく動作しないようです。

以前使えた baseUrl が使えないので publicPath をつかう

ということで、デプロイされた後の Vue ソースに含まれるパスは、デフォルトだとルートディレクトリなので、相対パスにします。

Configuration Reference : outputdir を確認したら、自分の使っている Vue CLI 4 では baseUrl が廃止されていたので publicPath をつかいます。

baseUrl
Deprecated since Vue CLI 3.3, please use publicPath instead.

publicPath デフォルト値が / です。

この設定でそのまま書き出してしまうと、ルートディレクトリ直下ではうまく動くんですが、今回のように特定のディレクトリ以下でうごくようにする場合には都合が悪いので、以下の設定で調整しました。

module.exports = {
  publicPath: './',
  outputDir: '../public/sub-dir'
}

と、publicPath を加えました。

npm run build

ビルドしてみると、

表示されました！

相対パスで直下をたどっていく形になりました。

Configuration Reference : publicpath に書いてある通り、

The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.
値を空の文字列（''）または相対パス（./）に設定して、すべてのアセットが相対パスを使用してリンクされるようにすることもできます。これにより、ビルドされたバンドルを任意のパブリックパスでデプロイしたり、Cordovaハイブリッドアプリなどのファイルシステムベースの環境で使用したりできます。

というように、何かしらのシステムの一部で使ってみたいときに有効なので、使い方を整理できてよかったです。