vue build で生成したサイトをWEBサーバー無しで動かしたい

I.Y 9/18/2020 webpackVue.jsトラブルシューティング

前にも一度解決したことがある問題なのですが、完全に忘れてて調べ直すことになったのでここに残して起きます。

# そのままbuildしただけでは動かない

ローカルサーバで開発を進め、いざ本番用に書き出したところでindex.htmlを開いても動かないんですねこれが。
ローカルサーバで動作することは確認しているので、WEBサーバを介さずにアクセスする場合だけ動作しない という状態になります。

# 何故動かない

コンソールを確認すると以下のエラーメッセージが出力されていました。

Failed to load resource: net::ERR_FILE_NOT_FOUND app.2924915d.css:1 
Failed to load resource: net::ERR_FILE_NOT_FOUND app.eb2b15b3.js:1
Failed to load resource: net::ERR_FILE_NOT_FOUND chunk-vendors.468a5298.js:1 
Failed to load resource: net::ERR_FILE_NOT_FOUND /favicon.ico:1

1
2
3
4

Failed to load resourceなので、buildしてまとめられたCSS、JS等々が上手く読み込めてないことが分かります。
それぞれのPATHの指定を確認してもらうと、一見正しく指定ができているように見えるかと思います。
しかし、その部分にこそ今回のキモがあります。

<link href=/css/app.2924915d.css>

キモというのは、最初の 「/」 です。
この指定（絶対PATH）では、WEBサーバのように 公開するディレクトリ(ドキュメントルート) が設定されていないと、PC本体のルートディレクトリを指してしまいます。

# 対処方法

buildの設定を変更することで解決できます。
vue.config.jsに、以下のように設定します。

vue.config.jsがない人は、プロジェクトのルートに作成してください。

module.exports = {
    publicPath: './'
}

1
2
3

publicPathは、buildされたWEBサイトのベースとなるURLを指定する項目です。
デフォルトでは、先程キモと書いた「/」がそのベースURLになっています。

# 最後に

今回はルートではなくbuild先のディレクトリをベースにしたいので、「./」と相対PATHで指定できるようにすることで解決しました。
これらの設定は開発環境用、本番環境用で使い分けることも可能なので気になった人はぜひ調べてみてください。

daysput