Object
ユニバーサルなウェブアプリケーションから静的なウェブアプリケーションの生成について設定します。
nuxt generate
コマンドを実行するか nuxt.generate()
を呼び出したとき、Nuxt.js は generate
プロパティで定義された設定を使います。
String
'dist'
nuxt generate
で作成されるディレクトリ名です。
Boolean
false
vue-devtools よる検査を許可するかどうかを設定します。
もし既に nuxt.config.js
か何かで有効にしている場合は、このフラグに関係なく devtools
が有効になります。
String
or Boolean
'200.html'
SPA のフォールバックとなるパス。このファイルは、 generate されたサイトを静的サイトホスティングへデプロイする時に利用します。mode: 'spa'
においてルーティングが存在しない場合、フォールバックされます。
Number
0
2つのレンダーの間でのインターバルで、ウェブアプリケーションからの潜在的な API に対して溢れでないようにするためのものです。
Array
generate コマンドでは 動的なルーティング は無視されます。
例:
-| pages/
---| index.vue
---| users/
-----| _id.vue
ルート /
のみが Nuxt.js によって生成されます。
動的なパラメーターを用いたルートを生成させたい場合は、動的なルーティングの配列をセットする必要があります。
nuxt.config.js
内に /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
を返す 関数
を使うコールバック
と一緒に 関数
を使うnuxt.config.js
import axios from 'axios'
export default {
generate: {
routes: function () {
return axios.get('https://my-api/users')
.then((res) => {
return res.data.map((user) => {
return '/users/' + user.id
})
})
}
}
}
nuxt.config.js
import axios from 'axios'
export default {
generate: {
routes: function (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
のコンテキストに渡すことが望ましいでしょう。上記のコードを、以下のように変更することで、実現することができます :
nuxt.config.js
import axios from 'axios'
export default {
generate: {
routes: function () {
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) }
}
Boolean
true
デフォルトでは、 nuxt generate
を実行すると、全てのルーティングに合わせたディレクトリと、 index.html
が提供されます。
例:
-| dist/
---| index.html
---| about/
-----| index.html
---| products/
-----| item/
-------| index.html
false を設定した場合、ルーティングパスに従う形で HTML ファイルを生成します :
-| dist/
---| index.html
---| about.html
---| products/
-----| item.html
Note: このオプションは、 Netlify をはじめとする、 HTML によるフォールバックを利用する静的サイトホスティングサイトにおいて利用されます。
Number
500
generate.concurrency
では、単一のスレッドで同時に生成されるルーティングの生成の数を設定します。
間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する