您正在浏览 Nuxt 2 文档。前往 Nuxt 3 文档， 或了解更多关于 Nuxt 2 长期支持。

generate 属性

配置通用 Web 应用程序或静态 Web 应用程序的生成。

  • 类型: Object

调用 nuxt.generate() 时，Nuxt 会使用 generate 属性中定义的配置。

nuxt.config.js
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 选项：

nuxt.config.js
export default {
  generate: {
    cache: {
      ignore: ['renovate.json'] // 忽略对此文件的更改
    }
  }
}

concurrency

  • 类型: Number
  • 默认值: 500

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

crawler

  • 类型: boolean
  • 默认值: true

从 Nuxt v2.13 起，Nuxt 内置了一个爬虫，会爬取相对链接并根据爬取的链接生成动态链接。如果想禁用此功能，请设为 false。

export default {
  generate: {
    crawler: false
  }
}

dir

  • 类型: String
  • 默认值: 'dist'

使用 nuxt generate 命令构建 Web 应用程序时创建的目录名称。

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

添加匹配所有路由的正则表达式时，会阻止这些路由的生成。

nuxt.config.js
export default {
  generate: {
    exclude: [
      /^\/admin/ // 以 /admin 开头的路径
    ]
  }
}

-| dist/
---| index.html

也可以用字符串排除特定路由：

nuxt.config.js
export default {
  generate: {
    exclude: ['/my-secret-page']
  }
}

fallback

  • 类型: String 或 Boolean
  • 默认值: 200.html
nuxt.config.js
export default {
  generate: {
    fallback: '404.html'
  }
}

回退 HTML 文件的路径，需要设置为错误页面。此配置使未知路由也能通过 Nuxt 渲染。如果未设置或设为假值，回退 HTML 文件名为 200.html。设为 true 时，文件名为 404.html。指定字符串时，使用该字符串。

nuxt.config.js
fallback: false;

对于静态生成的页面，建议对错误页面和 excludes 覆盖的页面使用 404.html（不希望生成为静态页面时）。

nuxt.config.js
fallback: true

但 Nuxt 允许配置任意页面，如果不想使用 200.html 或 404.html，可以添加字符串并重定向到该页面。当然这不是必须的，最好还是重定向到 200.html / 404.html。

nuxt.config.js
fallback: 'fallbackPage.html'

注意：某些服务（如 Netlify）会自动检测 404.html。如果自行配置 Web 服务器，请查阅文档了解如何设置错误页面（并将错误页面设置为 404.html 文件）

interval

  • 类型: Number
  • 默认值: 0

两次渲染之间的毫秒间隔，用于避免向 Web 应用程序的潜在 API 发送过多请求。

minify

routes

  • 类型: Array
从 Nuxt v2.13 起，运行 nuxt generate 时会安装一个爬虫，通过爬取链接标签来生成路由。如果想生成未链接的页面（如秘密页面），可以使用 generate.routes 属性。
使用 Nuxt v2.12 及以下的 generate 命令时，动态路由会被忽略。

示例：

-| pages/
---| index.vue
---| users/
-----| _id.vue

Nuxt 只会生成 / 路由。

如果想让 Nuxt 生成带动态参数的路由，需要在 generate.routes 属性中设置动态路由数组。

添加 /users/:id 路由：

nuxt.config.js
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

很好，但如果有动态参数怎么办？

  1. 使用返回 Promise 的 Function。
  2. 使用带 callback(err, params) 的 Function。

返回 Promise 的函数

nuxt.config.js
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 函数

nuxt.config.js
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 上下文。可以将上面的代码修改如下：

nuxt.config.js
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 文件会根据路由路径生成：

nuxt.config.js
export default {
  generate: {
    subFolders: false
  }
}

-| dist/
---| index.html
---| about.html
---| products/
-----| item.html
Edit this page on GitHub Updated at Tue, Apr 14, 2026