Nuxt.jsで手間取ったことまとめ

Nuxt.jsのプロジェクトをいくつか作っていて躓いたところまとめ

nuxtが生成するディレクトリについて整理

buildDir

• nuxt.config.js buildDir プロパティ．
• nuxt build や nuxt generate した時
• デフォルトは .nuxt

generate.dir

• nuxt.config.js generate プロパティの下にある dir
• nuxt generate もしくはspaモードで nuxt build した時
• デフォルトは dist

ページ上部のプログレスバーがいらない時

• nuxt.config.js loading プロパティを false にする．

同一リポジトリに複数のnuxtプロジェクトがあるとき

• 複数のnuxt.config.jsを用意することになる
• それぞれ srcDir と buildDir と generate.dir を設定してやること．
• npm-run-allなどで並行にビルドを走らせようとするとポートが衝突するので nuxt build -p 3001 など指定してやると良い．

nuxt generate したファイルをルート以外のURLに配置するとき

例えば https://example.com/my/dir/ に配置するとき

• nuxt.config.js router.base に /my/dir/
  • devのときは /　になるようにNODE_ENVなどで切り替えると良い
• nuxt.config.js build.publicPath に https://example.com/my/dir/
• aタグhref属性ではルートを /my/dir/ と見て良い．
  • つまり https://example.com/my/dir/hoge へは単に /hoge として良い