【Vue.js】npm run build時にindex.htmlがコピーされない問題を解決する | Wood-Roots:blog

2019
06/28

npm run build時にindex.htmlがコピーされない問題を解決する

Vue CLIではプロジェクトをビルドするのにnpm run buildとコマンドを打ちます。

その際、publicフォルダの中身をdistフォルダにコピーしてくれるはずなのですが、public/hoge/index.htmlのようにサブフォルダの中に入っているindex.htmlファイルだけがコピーされませんでした。

public/index.htmlはプロジェクトのトップページ（という言い方でいいのだろうか）として使われるのでコピーされなくても正常です。

手作業でファイルをコピーするのも面倒だし何よりどのファイルが最新か混乱してしまいそうだったので、正しくコピーされるように原因と解決策を調べました。

※　Vue CLIのバージョンは3.2.1を使用しています。

ADs

1.vue.config.jsを作成

プロジェクトフォルダの直下にvue.config.jsという名前のファイルを作成します。
既に作成済みの場合は次の手順に進みます。

2.vue.config.jsに以下を書く

Vue-cliがpublicからdistにファイルをコピーする処理はcopy-webpack-pluginを使っていますが、その設定を上書きします。

1
2
3
4
5
6
7
8
module.exports = {
  chainWebpack: config => {
    config.plugin('copy').tap(([options]) => {
      options[0].ignore = ['./index.html', '.DS_Store']
      return [options]
    })
  }
}

ちなみに：デフォルト値はどうなっているか

\node_modules\@vue\cli-service\lib\config\app.js

の143行目で定義されています。

1
    const publicCopyIgnore = ['index.html', '.DS_Store']

.DS_Storeは分かりますがindex.htmlは「./index.html」のほうが適切なような…？

参考（というかそのまま）

参考になりました。ありがとうございます。

Custom ignore pattern for public folder copy

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social