nuxt generateで生成したページにassetsで指定していた画像が表示されない、及びpluginsが効いていない

Question

.vueコンポーネントで、

<img src="~assets/img/js.svg" width="96px" height="96px">

上記は、generateをしないファイルでは表示されます。
しかし、generateで生成したファイル（同じページ）を覗いてみると、こうしたassetsで指定した画像が全く表示されません。

調べてみると、generate後に画像ファイルのディレクトリが変わっているようでして、それが問題なのかとも思っていますが、対処法がわかりません。

①これを、generate後のディレクトリが変わっていても表示できるようにしたいのですが、どなたか御助力お願いできないでしょうか。

もう1点、generate前では、しっかり効いていたpluginsたちが、generate後のファイルでは全く効いておりません。こちらは、調べても皆目見当もつきません。

②generate後でもpluginsが効くような設定方法を教えていただきたいです。

どちらか1つでも、御助力願えたら大変助かります。
どうか、よろしくお願いいたします。

Answer 1

こちらも、いま同じ問題を抱えています。

こちらで調べたことをメモしておきます。

---

[1] nuxt.config.js の設定の変更が必要な模様

mode: 'spa',を
mode: 'universal',に変更

(画像というより、書き出されるHTMLに関係がありそうですが..)

---

[2] ドキュメントルート配下でないと、そのままでは表示できない

実はすでに「/dist/_nuxt/」内に、画像があり
HTML側では<img src="/_nuxt/img/89c8150.jpg">などと書き出されていると思います。

「http://localhost:8000」などで表示するには問題ないのですが、
以下のようなURLで表示しようとしている場合src内のパスのままだと表示できない可能性があります。
http://localhost/works/案件名/
https://dev.example.com/works/案件名/

追記:
「nuxt.config.js」内のbuild: の設定を変えると解決できました。

// http://localhost/works/案件名/
// https://dev.example.com/works/案件名/ 
// の場合↓
build: {
  extend (config, ctx) {
    config.output.publicPath = '/works/案件名/_nuxt/'
  }
} 

これにより、HTML側の出力は
<img src="/_nuxt/img/89c8150.jpg">から
<img src="/works/案件名/_nuxt/img/89c8150.jpg">に変わり、画像が表示されました。

参考URL:
https://teratail.com/questions/194964

Comments

[ff7575]

ご回答、大変参考になりました。
ありがたいです。
公式サイトを入念に読んで、
完全に解決できるよう努力します。

Answer 2

同じところで詰まっています。
解決できましたか？

Comments

[ff7575]

全く解決しておりません。
なので、諦めてnpm run start によってアプリケーションとして動かしました。

[aktshi]

同じくです。もう少し奮闘してみます。ご回答ありがとうございます。