API: generate 属性配置

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

routes

  • 类型： Array

在 Nuxt.js 执行 generate 命令时，动态路由 会被忽略。

例如：

  1. -| pages/
  2. ---| index.vue
  3. ---| users/
  4. -----| _id.vue

上面的目录结构，Nuxt.js 只会生成路由 / 对应的静态文件。（译者注：因为 /users/:id 是动态路由）如果想让 Nuxt.js 为动态路由也生成静态文件，你需要指定动态路由参数的值，并配置到 routes 数组中去。

例如，我们可以在 nuxt.config.js 中为 /users/:id 路由配置如下：

  1. module.exports = {
  2.   generate: {
  3.     routes: ['/users/1', '/users/2', '/users/3']
  4.   }
  5. }

当我们运行 nuxt generate 命令时：

  1. [nuxt] Generating...
  2. [...]
  3. nuxt:render Rendering url / +154ms
  4. nuxt:render Rendering url /users/1 +12ms
  5. nuxt:render Rendering url /users/2 +33ms
  6. nuxt:render Rendering url /users/3 +7ms
  7. nuxt:generate Generate file: /index.html +21ms
  8. nuxt:generate Generate file: /users/1/index.html +31ms
  9. nuxt:generate Generate file: /users/2/index.html +15ms
  10. nuxt:generate Generate file: /users/3/index.html +23ms
  11. nuxt:generate HTML Files generated in 7.6s +6ms
  12. [nuxt] Generate done

棒极了，但是如果路由动态参数的值是动态的而不是固定的，应该怎么做呢？

  1. 使用一个返回 Promise 对象类型 的 函数。
  2. 使用一个回调是 callback(err, params) 的 函数。

返回一个 Promise 对象的函数

nuxt.config.js

  1. const axios = require('axios')
  3. module.exports = {
  4.   generate: {
  5.     routes() {
  6.       return axios.get('https://my-api/users').then(res => {
  7.         return res.data.map(user => {
  8.           return '/users/' + user.id
  9.         })
  10.       })
  11.     }
  12.   }
  13. }

返回回调函数

nuxt.config.js

  1. const axios = require('axios')
  3. module.exports = {
  4.   generate: {
  5.     routes(callback) {
  6.       axios
  7.         .get('https://my-api/users')
  8.         .then(res => {
  9.           const routes = res.data.map(user => {
  10.             return '/users/' + user.id
  11.           })
  12.           callback(null, routes)
  13.         })
  14.         .catch(callback)
  15.     }
  16.   }
  17. }

加速带有有效载荷(payload)的动态路由生成

在上面的示例中，我们使用来自服务器的user.id来生成路由，但抛弃其余的数据。通常，我们需要从/users/_id.vue中再次获取它。虽然我们可以这样做，但我们可能需要将generate.interval设置为100，以免通过调用来执行。因为这会增加生成脚本的运行时间，所以最好将整个用户对象传递给_id.vue中的context。我们通过将上面的代码修改为：

nuxt.config.js

  1. import axios from 'axios'
  3. export default {
  4.   generate: {
  5.     routes() {
  6.       return axios.get('https://my-api/users').then(res => {
  7.         return res.data.map(user => {
  8.           return {
  9.             route: '/users/' + user.id,
  10.             payload: user
  11.           }
  12.         })
  13.       })
  14.     }
  15.   }
  16. }

现在我们可以从/users/_id.vue访问的payload，如下所示：

  1. async asyncData ({ params, error, payload }) {
  2.   if (payload) return { user: payload }
  3.   else return { user: await backend.fetchUser(params.id) }
  4. }

subFolders

  • 类型: Boolean
  • 默认: true

默认情况下，运行nuxt generate将为每个路由创建一个目录并生成index.html文件。

例如:

  1. -| dist/
  2. ---| index.html
  3. ---| about/
  4. -----| index.html
  5. ---| products/
  6. -----| item/
  7. -------| index.html

设置为false时，将根据路由路径生成 HTML 文件：

  1. -| dist/
  2. ---| index.html
  3. ---| about.html
  4. ---| products/
  5. -----| item.html

注意：使用Netlify或使用 HTML 回退的任何静态托管服务器，此选项可能很有用。

并发

  • 类型: Number
  • 默认: 500

路由的生成是并发的，generate.concurrency指定在一个线程中运行的路由数量。