• 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

    • 类型: StringBoolean
    • 默认: '200.html'在将生成的站点部署到静态主机时,可以使用此文件。它将回退到模式:mode:'spa'

    interval

    • 类型: Number
    • 默认: 0两个渲染周期之间的间隔,以避免使用来自Web应用程序的API调用互相干扰。

    minify

    • 不推荐使用!
    • 使用 build.html.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: [
    4. '/users/1',
    5. '/users/2',
    6. '/users/3'
    7. ]
    8. }
    9. }

    当我们运行 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

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

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

    返回一个 Promise 对象的函数

    nuxt.config.js

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

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

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

    nuxt.config.js

    1. import axios from 'axios'
    2. export default {
    3. generate: {
    4. routes: function () {
    5. return axios.get('https://my-api/users')
    6. .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指定在一个线程中运行的路由数量。