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

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

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

# buildDir

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

# generate.dir

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

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

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

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

  • 複数のnuxt.config.jsを用意することになる
  • それぞれ srcDirbuildDirgenerate.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.publicPathhttps://example.com/my/dir/
  • aタグhref属性ではルートを /my/dir/ と見て良い.
    • つまり https://example.com/my/dir/hoge へは単に /hoge として良い
Last Updated: 5/13/2020, 12:57:47 PM