Nuxt.js generate 屬性配置

generate 屬性配置

• 類型： Object

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

當(dāng)運(yùn)行 nuxt generate 命令或在編碼中調(diào)用 nuxt.generate() 時(shí)，Nuxt.js 會(huì)使用 generate 屬性的配置。

dir

• 類型： 'String'
• 默認(rèn)值： 'dist'

nuxt generate 生成的目錄名稱。

devtools

• 類型: boolean
• 默認(rèn): false

配置是否允許 vue-devtools 調(diào)試。

如果您已經(jīng)通過 nuxt.config.js 或其他方式激活，則無論標(biāo)志為 true 或者 false，devtools都會(huì)啟用。

fallback

• 類型: String 或 Boolean
• 默認(rèn): '200.html'

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

interval

• 類型: Number
• 默認(rèn): 0

兩個(gè)渲染周期之間的間隔，以避免使用來自Web應(yīng)用程序的API調(diào)用互相干擾。

minify

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

routes

• 類型： Array

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

例如：

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

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

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

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

當(dāng)我們運(yùn)行 nuxt generate 命令時(shí)：

[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

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

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

返回一個(gè) Promise 對(duì)象的函數(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
          })
        })
    }
  }
}

返回回調(diào)函數(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)的動(dòng)態(tài)路由生成

在上面的示例中，我們使用來自服務(wù)器的user.id來生成路由，但拋棄其余的數(shù)據(jù)。通常，我們需要從/users/_id.vue中再次獲取它。雖然我們可以這樣做，但我們可能需要將generate.interval設(shè)置為100，以免通過調(diào)用來執(zhí)行。因?yàn)檫@會(huì)增加生成腳本的運(yùn)行時(shí)間，所以最好將整個(gè)用戶對(duì)象傳遞給_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
• 默認(rèn): true

默認(rèn)情況下，運(yùn)行nuxt generate將為每個(gè)路由創(chuàng)建一個(gè)目錄并生成index.html文件。

例如:

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

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

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

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

并發(fā)

• 類型: Number
• 默認(rèn): 500

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