【Vue.js】CLI 3系でビルドしたファイルが表示されなかったら相対パスにしよう

Vue.jsでアプリケーションを開発してビルドするには、

npm run build

のようにビルドコマンドを実行するかと思います。

しかし、ビルドされたファイルを開いてみると、画面が真っ白で何も表示されないことが先日起きました。

今回はその時の対処法、試したことをまとめました。

■ 環境

• vue：3.9.2
• npm：6.4.1

ビルドされたファイルが画面に何も表示されない理由

Vue.jsでの開発時、デフォルトの設定のままビルドを行うと、出力ファイルはドメイン直下に配置される想定でビルドされるらしく、jsなどのパスは下記のように出力されます。

/static/js/app.js

この場合、ドメイン直下にファイルを配置すれば問題ないのですが、ドメイン直下以外のサブディレクトリに配置した場合、パスが通りません。

サブディレクトリに配置してもパスが通るようにするには、

./static/js/app.js

のようにパスが相対パスで書かれていなければいけません。

なので、ビルド時に上記のように相対パスで出力されるように設定を変えれば今回の問題は解決します。

解決方法1：vue.config.jsでビルド時の設定を変える

この方法は「vue ビルド 相対パス」のように調べたらたくさん出てくる内容です。

しかし、私の場合、何故かこの方法が上手くいきませんでした。

とりあえず、一般的な方法を下記にてご紹介します。

まず、Vueのプロジェクトのディレクトリ（package.jsonなどがある場所）にvue.config.jsを作成します。

作成後、下記の記述をします。

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

これで、再度npm run buildでビルドを行うとjsなどのパスが相対パスで出力されます。

・

・

・

しかし、私はこの方法でもパスが変わりませんでした。

次に、私が解決出来た方法をご紹介します。

解決方法2：config/index.jsでビルド時の設定を変える

解決方法

config/index.jsを開きます。

下記のコードを見つけて下さい。

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

この一番下の行を下記のように変更して下さい。

assetsPublicPath: '/',

↓

assetsPublicPath: './',

このassetsPublicPathの値がビルド時のパスの設定になります。

変更後、再度npm run buildでビルドを行うとjsなどのパスが相対パスで出力されます。

解決するまでの道

ビルド時のパスを変える方法をいくらググっても、vue.config.jsで設定を変更する方法しか出てこなかったので、仕方なく自分で解決することにしました。

まず、npm run buildはpackage.jsonに登録されているスクリプトを実行しているので、そこを見てみます。

"build": "node build/build.js"

上記の記述から、npm run buildのコマンドを実行したら、build/build.jsの処理が実行されることが分かります。

なので、build/build.jsのファイルを見てみます。

ここで、webpackなどのファイルが読み込まれていました。

webpackでコンパイルする際のパスの設定はoutputのpublicPathというものです。

なので、publicPathでファイルを横断して検索しました。

そうしたら、webpack.base.conf.jsに下記のような記述がありました。

  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

ここでpublicPathにはassetsPublicPathという変数が使われていることが分かりました。

次に、assetsPublicPathでファイルを横断して検索をしたら、config/index.jsでこの変数を定義していました。

// Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

これで、再度npm run buildでビルドを行うとjsなどのパスが相対パスで出力されました。

まとめ

今回は、Vue.jsでビルドしたファイルのパスを相対パスに変更する方法を紹介しました。

vue.config.jsで変更する方法は調べればたくさん記事が出てきます。

しかし、webpackのpublickPathの値を変えることで相対パスに変更する方法は全然出てこなかったので、私のようにvue.config.jsが効かない・・・という方の参考になれば幸いです。