Vue cliでファイルにつくハッシュ値を削除する設定にすると同名の画像が重複してしまう

概要

Vue cli 3.0で複数ページが生成されるプロジェクトをしています。
ファイルに付与されるハッシュ値を削除する設定にしたのですが、
画像が重複する現象が起きてしまい、上手く解決できずに困っています。

試してみたこと

デフォルトですとcss,js,画像などにハッシュ値をつけるようになっているのですが、
運用でサーバにアップする際に不都合があるため下記のようにハッシュ値をつけないようvue.config.jsを設定しました。(filenameHashing: false)

module.exports = {
  pages: {
    page1: {
      entry: "src/pages/page1/index.ts",
      template: "src/pages/page1/index.pug",
      filename: "page1/index.html"
    },
    page2: {
      entry: "src/pages/page2/index.ts",
      template: "src/pages/page2/index.pug",
      filename: "page2/index.html"
    },
    ...(中略)...
    },
    filenameHashing: false
};

npm run buildを実行すると上手くハッシュ値は消えてくれるのですが、
下記のようなwarningが出てしまい、実際の表示も意図しない画像がでてしまい上手くいっていません。

Conflict: Multiple assets emit different content to the same filename img/main_01.jpg

warningメッセージを見る限りハッシュ値を削除したことで別ディレクトリのmain_01.jpg同士が
重複してしまうことが原因のように思えます。
例：
/src/assets/page1/images/main_01.jpg
/src/assets/page2/images/main_01.jpg
↓
/dist/img/main_01.jpg に出力しようとして衝突する

ハッシュ値を付与しない前提で上記を解消しようとする場合、
画像がプロジェクト内で常にユニークになるようにすればよい気もしますが、
すでにかなりの数の修正が必要になることと、運用も大変になるのでできれば避けたく...

例えば/dist/img/配下にディレクトリ構造を作ったり、
画像同士を区別するためにpageごとにユニークな文字列を画像に付与するなど
上手く解消できる方法がございますでしょうか？

yu-smc

2019/11/14 03:37 編集

例： /src/assets/page1/images/main_01.jpg /src/assets/page2/images/main_01.jpg ↓ /dist/img/main_01.jpg に出力しようとして衝突する ↑この仮説ですと、ハッシュを有効にした際も、ページに関わらず全てのファイルが/dist/img/に出力される設定になっているように思うのですが、そうはなっていないのでしょうか？できればテンプレートで画像を呼び出しているところも参照したいです。また、まだちょっと原因が特定できないのでなんともいえないですが、以下のようなサイトが参考になるかもしれません。 https://qiita.com/coppieee/items/4260bd0af246aebf5557

tsuyo_244

2019/11/14 04:29 編集

ご回答ありがとうございます。ハッシュを有効にした場合だと以下のようにファイル名後にハッシュ値が付与されるため、名前が衝突せずに別のファイルとして認識されるようです。 /dist/img/main_01.c20ebf7b.png /dist/img/main_01.9cdbedad.png テンプレートで画像を呼び出している部分は現状下記のようになっています。（Pugになっています） img.u-pcOnly(src="../../assets/product/images/mv_title.png") これで/src/assets/product/images/mv_title.pngを読み込んでいます。参考のURLもありがとうございます。確認させていただきます！