generate プロパティ
ユニバーサルなウェブアプリケーションや静的なウェブアプリケーションの生成について設定します。
-
型:
Object
nuxt.generate() を呼び出した際、Nuxt は generate プロパティで定義された設定を使います。
export default {
generate: {
...
}
}
cache
v2.14.0 で導入されました
-
型:
Objectまたはfalse
このオプションは追跡したファイルが変更されていない場合にリビルドを避けるために nuxt generate の static target で使われます。
デフォルト:
{
ignore: [
'.nuxt', // buildDir
'static', // dir.static
'dist', // generate.dir
'node_modules',
'.**/*',
'.*',
'README.md'
]
}
設定ファイル変更時にリビルドを避けたい場合は、cache.ignore オプションに対象となる設定ファイルのリストを追加してください：
export default {
generate: {
cache: {
ignore: ['renovate.json'] // このファイルに適用された変更を無視する
}
}
}
concurrency
-
型:
Number -
デフォルト:
500
ルート生成は並行で行われ、generate.concurrency は 1 スレッドで実行されるルートの数を指定します。
crawler
-
型:
boolean - デフォルト: true
Nuxt v2.13 以降、Nuxt には相対リンクをクロールし、クロールしたリンクに基づいて動的リンクを生成するクローラーがインストールされています。この機能を無効にしたい場合は false に設定してください。
export default {
generate: {
crawler: false
}
}
dir
-
型:
String -
デフォルト:
'dist'
nuxt generate コマンドを使ってウェブアプリケーションがビルドされる時に作成されるディレクトリ名です。
devtools
-
型:
boolean -
デフォルト:
false
vue-devtools による検査を許可するかどうかを設定します。
もしすでに nuxt.config.js か何かで有効にしている場合はこのフラグに関係なく devtools が有効になります。
exclude
-
型:
Array-
要素:
StringまたはRegExp
-
要素:
配列の文字列か正規表現を指定することができ、一致するルートの生成を防ぎます。generate.fallback が使われている場合はルートは引き続きアクセスすることができます。
この構造の例を用いると：
-| pages/
---| index.vue
---| admin/
-----| about.vue
-----| index.vue
デフォルトでは nuxt generate を実行するとそれぞれのルートに対してファイルが生成されます。
-| dist/
---| index.html
---| admin/
-----| about.html
-----| index.html
"ignore" で全てのルートに一致する正規表現を追加した場合はこれらのルート生成が防止されます。
export default {
generate: {
exclude: [
/^\/admin/ // /admin で始まるパス
]
}
}
-| dist/
---| index.html
文字列で特定のルートを除外することもできます：
export default {
generate: {
exclude: ['/my-secret-page']
}
}
fallback
-
型:
StringまたはBoolean -
デフォルト:
200.html
export default {
generate: {
fallback: '404.html'
}
}
フォールバックする HTML ファイルのパスです。エラーページとして設定する必要があります。この設定により、不明なルートも Nuxt を介してレンダリングされます。未設定または falsy を取り扱える値が設定されている場合、フォールバック HTML ファイルの名前は 200.html になります。もし、true を設定すると、ファイル名は 404.html になります。値として文字列を指定すると、その文字列が代わりに使用されます。
fallback: false;
静的に生成されたページを運用する場合、エラーページと excludes でカバーされるページに 404.html を使うことをおすすめします（静的ページとして生成してほしくない場合）。
fallback: true
しかし、Nuxt では任意のページを設定できるため、200.html または 404.html を使用したくない場合は代わりに文字列を追加して、そのページにリダイレクトができます。これはもちろん必須ではなく、200.html / 404.html にリダイレクトするのがベストです。
fallback: 'fallbackPage.html'
注意: 複数のサービス（例えば Netlify）では、404.html を自動的に検出します。ウェブサーバーを独自に設定する場合は、ドキュメントを参照してエラーページの設定方法を確認してください（そして、エラーページを 404.html ファイルに設定してください）
interval
-
型:
Number -
デフォルト:
0
2 つのレンダーの間でのミリセカンドのインターバルで、ウェブアプリケーションからの潜在的な API に対して溢れでないようにするためのものです。
minify
- 非推奨!
- 代わりに build.html.minify を使ってください
routes
-
型:
Array
nuxt generate を実行すると、リンクタグをクロールしてルートを生成するクローラがインストールされています。リンクされていないページ（シークレットページなど）も生成したい場合は generate.routes プロパティを使うことができます。Nuxt v2.12 以下で generate コマンドを使うと、動的ルートは無視されます。例：
-| pages/
---| index.vue
---| users/
-----| _id.vue
ルート / のみが Nuxt によって生成されます。
Nuxt で動的なパラメータをもつルートを生成したい場合は generate.routes プロパティに動的なルートの配列を設定する必要があります。
/users/:id のルートを追加します：
export default {
generate: {
routes: ['/users/1', '/users/2', '/users/3']
}
}
そして nuxt generate を実行した場合：
[nuxt] Generating...
[...]
nuxt:render Rendering url / +154ms
nuxt:render Rendering url /users/1 +12ms
nuxt:render Rendering url /users/2 +33ms
nuxt:render Rendering url /users/3 +7ms
nuxt:generate Generate file: /index.html +21ms
nuxt:generate Generate file: /users/1/index.html +31ms
nuxt:generate Generate file: /users/2/index.html +15ms
nuxt:generate Generate file: /users/3/index.html +23ms
nuxt:generate HTML Files generated in 7.6s +6ms
[nuxt] Generate done
すばらしい、ですが、動的なパラメータがある場合はどうでしょうか？
-
Promiseを返すFunctionを使う。 -
callback(err, params)と一緒にFunctionを使う。
Promise を返す関数
import axios from 'axios'
export default {
generate: {
routes() {
return axios.get('https://my-api/users').then(res => {
return res.data.map(user => {
return '/users/' + user.id
})
})
}
}
}
callback 関数
import axios from 'axios'
export default {
generate: {
routes(callback) {
axios
.get('https://my-api/users')
.then(res => {
const routes = res.data.map(user => {
return '/users/' + user.id
})
callback(null, routes)
})
.catch(callback)
}
}
}
payload による動的ルーティング生成の高速化
上記の例では、サーバーから user.id を使ってルーティングを生成しますが、残りのデータは破棄しています。通常はそのような場合は /users/_id.vue 内から再度データを取得する必要があります。再度取得することは可能ですが、その場合は generate.interval に 100 のような値を設定してサーバー呼び出しが殺到しないようにする必要があります。このような実装は生成時間の増加へとつながるため、user オブジェクト自体を _id.vue コンテキストに渡すことが好ましいです。上記のコードを以下のように変更することで実現できます：
import axios from 'axios'
export default {
generate: {
routes() {
return axios.get('https://my-api/users').then(res => {
return res.data.map(user => {
return {
route: '/users/' + user.id,
payload: user
}
})
})
}
}
}
これで /users/_id.vue から payload へアクセスできます：
async asyncData ({ params, error, payload }) {
if (payload) return { user: payload }
else return { user: await backend.fetchUser(params.id) }
}
subFolders
-
型:
Boolean -
デフォルト:
true
デフォルトでは nuxt generate を実行すると、Nuxt はルートごとにディレクトリを作成し index.html ファイルを提供します。
例：
-| dist/
---| index.html
---| about/
-----| index.html
---| products/
-----| item/
-------| index.html
false を設定した場合、HTML ファイルはルートパスに従って生成されます：
export default {
generate: {
subFolders: false
}
}
-| dist/
---| index.html
---| about.html
---| products/
-----| item.html
Sébastien Chopin
Nazaré da Piedade
Nobu
川音리오
Maciek Palmowski
Nestor Vera
Daniel Roe
Yue Yang
Jeronimas
Clément Ollivier
Alexander Lichter
N3-rd
Adrien Zaganelli
Mag
Stefan Huber
Olga Bulat
Paiva
Florian Reuschel
Savas Vedova
HIJACK
Vinícius Alves
Kareem Dabbeet
Valentín Costa
Ryan Skinner
Alex Hirzel
Ajeet Chaulagain
René Eschke
Nico Devs
Muhammad
Naoki Hamada
Tom
Yann Aufray
Anthony Chu
Nuzhat Minhaz
Lucas Portet
Richard Schloss
Bobby
bpy
Antony Konstantinidis
Hibariya
Jose Seabra
Eze
Florian Lefebvre
Lucas Recoaro
Julien SEIXAS