- generate 属性配置
- dir
- devtools
- fallback
- interval
- minify
- routes
- 返回一个 Promise 对象的函数
- 返回回调函数
- 加速带有有效载荷(payload)的动态路由生成
- subFolders
- 并发
generate 属性配置
- 类型:
Object
配置 Nuxt.js 应用生成静态站点的具体方式。
当运行 nuxt generate 命令或在编码中调用 nuxt.generate() 时,Nuxt.js 会使用 generate 属性的配置。
dir
- 类型: 'String'
- 默认值:
'dist'nuxt generate生成的目录名称。
devtools
- 类型:
boolean - 默认:
false配置是否允许 vue-devtools 调试。
如果您已经通过 nuxt.config.js 或其他方式激活,则无论标志为 true 或者 false,devtools都会启用。
fallback
- 类型:
String或Boolean - 默认:
'200.html'在将生成的站点部署到静态主机时,可以使用此文件。它将回退到模式:mode:'spa'。
interval
- 类型:
Number - 默认:
0两个渲染周期之间的间隔,以避免使用来自Web应用程序的API调用互相干扰。
minify
- 不推荐使用!
- 使用 build.html.minify 来替代。
routes
- 类型:
Array在 Nuxt.js 执行generate命令时,动态路由 会被忽略。
例如:
-| pages/---| index.vue---| users/-----| _id.vue
上面的目录结构,Nuxt.js 只会生成路由 / 对应的静态文件。(译者注:因为 /users/:id 是动态路由)如果想让 Nuxt.js 为动态路由也生成静态文件,你需要指定动态路由参数的值,并配置到 routes 数组中去。
例如,我们可以在 nuxt.config.js 中为 /users/:id 路由配置如下:
module.exports = {generate: {routes: ['/users/1','/users/2','/users/3']}}
当我们运行 nuxt generate 命令时:
[nuxt] Generating...[...]nuxt:render Rendering url / +154msnuxt:render Rendering url /users/1 +12msnuxt:render Rendering url /users/2 +33msnuxt:render Rendering url /users/3 +7msnuxt:generate Generate file: /index.html +21msnuxt:generate Generate file: /users/1/index.html +31msnuxt:generate Generate file: /users/2/index.html +15msnuxt:generate Generate file: /users/3/index.html +23msnuxt:generate HTML Files generated in 7.6s +6ms[nuxt] Generate done
棒极了,但是如果路由动态参数的值是动态的而不是固定的,应该怎么做呢?
- 使用一个返回
Promise对象类型 的函数。 - 使用一个回调是
callback(err, params)的函数。
返回一个 Promise 对象的函数
nuxt.config.js
const axios = require('axios')module.exports = {generate: {routes: function () {return axios.get('https://my-api/users').then((res) => {return res.data.map((user) => {return '/users/' + user.id})})}}}
返回回调函数
nuxt.config.js
const axios = require('axios')module.exports = {generate: {routes: function (callback) {axios.get('https://my-api/users').then((res) => {var routes = res.data.map((user) => {return '/users/' + user.id})callback(null, routes)}).catch(callback)}}}
加速带有有效载荷(payload)的动态路由生成
在上面的示例中,我们使用来自服务器的user.id来生成路由,但抛弃其余的数据。通常,我们需要从/users/_id.vue中再次获取它。虽然我们可以这样做,但我们可能需要将generate.interval设置为100,以免通过调用来执行。因为这会增加生成脚本的运行时间,所以最好将整个用户对象传递给_id.vue中的context。我们通过将上面的代码修改为:
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) }}
subFolders
- 类型:
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
注意:使用Netlify或使用HTML回退的任何静态托管服务器,此选项可能很有用。
并发
- 类型:
Number - 默认:
500路由的生成是并发的,generate.concurrency指定在一个线程中运行的路由数量。
