nuxt.jsのassetsフォルダについて

Question

nuxt.jsのassetsフォルダについて質問です。

簡単なwebサイトの制作しています。
assets/img　ここに画像を入れてpagesのvueファイル内で<img src="~assets/img/hoge.png">と書き表示されることは確認できたのですが、jsファイルはどのように扱うことが出来るのでしょうか？

例えば、全ページに適用したい処理が書いているcommon.jsを作成し、
assets/js/common.js　と格納した場合、このファイルはどこからどのようにして読み込めるのでしょうか？

(最終的にはyarn generateして、dist内の静的ファイルをftpサーバーにあげる予定です。)

Answer 1

head要素またはbody要素(の最後)にscript要素を挿入したい場合、nuxt.config.jsのheadに設定します。(引用)

module.exports = {
  head: {
    script: [
      { src: xxx, type: 'text/javascript', body: true }
    ]
  }
}

xxxはファイルパスです。
headという設定の名前がややこしいですが、Nuxt.jsがvue-metaというライブラリを利用していて、そのライブラリで使える設定が使えるということです。
そちらのライブラリも調べてみてください。

追記(2018/11/18)

質問の意図をうまく汲み取れていない部分がありましたので、追記します。

質問の「全ページに適用したい処理が書いているcommon.js」については、以下の対応が考えられます。

「Vueアプリケーションが実行される前に何かしたい」場合は、
/plugins/common.jsを作成しnuxt.config.jsのpluginsにパスを記述してください(参考)。

「Vueアプリケーションでルーティングが行われるタイミングで何かしたい」場合は、
/middleware/common.jsを作成して、コンポーネントのファイルに設定してください(参考1、参考2)。

もしくはモジュールが求めているものかもしれませんが、
長くなるので説明は省略します。

---

assetsについては、以下の説明をもって最初の回答を訂正いたします。

/assetsディレクトリにあるものは、ビルドする際にwebpackで操作されることを意図しています。
また、/assetsディレクトリには画像やCSSをいれておくのが、本来Nuxtが意図した使い方です。

webpackで操作されることを意図しないファイルは/staticディレクトリに配置してください。
/static/xxxは、ビルド時に/xxxとして、そのままコピーされます。
faviconなどはビルドの必要が無いのでここが自然です。

assetsとstaticについてはこちらを参照してください。

---

okpkさんのおっしゃる通り、nuxt.config.jsのheadプロパティには、CDNで配布されているライブラリなどをwebpackのビルドファイルに含まずにリンクする場合に有用です。

Comments

[okpk]

回答ありがとうございます。

すみません、すごい初歩的な疑問になるのですが、パスはどのようなものになるのでしょうか？
確かにcdnなどから配布されている外部URL(jqueryやcreateJS等)はhttpsからの書き方で読み込めていることは確認できたのですが、

仮にassets内にjsフォルダを作り、hoge.jsを入れた場合は、{src:"/assets/js/hoge.js"}とかけるのでしょうか？
hoge.jsをES6で書いた場合このままだとブラウザは読み込めませんよね...?

[NozomuIkuta]

追記しました。
また、質問に「JavaScript」のタグをつけていただけると他の方が見つけやすくなると思うので、お願いします。

[okpk]

大変わかりやすい回答をしていただき、ありがとうございました。
全ページで使う処理(common.js)をプラグインと定義しpluginsフォルダで使用するという点も腑に落ちました。
また、ルーティングのタイミングでの処理はmiddlewareに追加するのですね。

「Javascript」タグも追加致しました。

[NozomuIkuta]

解決したようでよかったです
タグ追加ありがとうございます