generate 屬性配置

• 類型： Object

配置 Nuxt.js 應用生成靜態(tài)站點的具體方式。

當運行 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'

在將生成的站點部署到靜態(tài)主機時，可以使用此文件。它將回退到模式：mode:'spa'。

interval

• 類型: Number
• 默認: 0

兩個渲染周期之間的間隔，以避免使用來自Web應用程序的API調用互相干擾。

minify

• 不推薦使用!
• 使用 build.html.minify 來替代。

routes

• 類型： Array

在 Nuxt.js 執(zhí)行 generate 命令時，動態(tài)路由 會被忽略。

例如：

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

上面的目錄結構，Nuxt.js 只會生成路由 / 對應的靜態(tài)文件。（譯者注：因為 /users/:id 是動態(tài)路由） 如果想讓 Nuxt.js 為動態(tài)路由也生成靜態(tài)文件，你需要指定動態(tài)路由參數(shù)的值，并配置到 routes 數(shù)組中去。

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

module.exports = {
  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

棒極了，但是如果路由動態(tài)參數(shù)的值是動態(tài)的而不是固定的，應該怎么做呢？

1. 使用一個返回 Promise 對象類型 的 函數(shù)。
2. 使用一個回調是 callback(err, params) 的 函數(shù)。

返回一個 Promise 對象的函數(shù)

nuxt.config.js

const axios = require('axios')

module.exports = {
  generate: {
    routes () {
      return axios.get('https://my-api/users')
        .then((res) => {
          return res.data.map((user) => {
            return '/users/' + user.id
          })
        })
    }
  }
}

返回回調函數(shù)

nuxt.config.js

const axios = require('axios')

module.exports = {
  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)的動態(tài)路由生成

在上面的示例中，我們使用來自服務器的user.id來生成路由，但拋棄其余的數(shù)據(jù)。通常，我們需要從/users/_id.vue中再次獲取它。雖然我們可以這樣做，但我們可能需要將generate.interval設置為100，以免通過調用來執(zhí)行。因為這會增加生成腳本的運行時間，所以最好將整個用戶對象傳遞給_id.vue中的context。我們通過將上面的代碼修改為：

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
            }
          })
        })
    }
  }
}

現(xiàn)在我們可以從/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將為每個路由創(chuàng)建一個目錄并生成index.html文件。

例如:

-| dist/
---| index.html
---| about/
-----| index.html
---| products/
-----| item/
-------| index.html

設置為false時，將根據(jù)路由路徑生成HTML文件：

-| dist/
---| index.html
---| about.html
---| products/
-----| item.html

注意：使用Netlify或使用HTML回退的任何靜態(tài)托管服務器，此選項可能很有用。

并發(fā)

• 類型: Number
• 默認: 500

路由的生成是并發(fā)的，generate.concurrency指定在一個線程中運行的路由數(shù)量。