A propriedade generate

Configura a geração da sua aplicação web universal para uma aplicação web estática.

• Tipo: Object

Quando estiver chamando o nuxt.generate(), o Nuxt usará a configuração definida dentro da propriedade generate.

export default {
  generate: {
    ...
  }
}

A propriedade cache

Introduzida dentro da versão 2.14.0

• Tipo: Object ou false

Esta opção é usada pelo comando nuxt generate com o alvo estático para evitar a reconstrução quando nenhum ficheiro rastreado for mudado.

Valores padrão:

{
  ignore: [
    '.nuxt', // buildDir
    'static', // dir.static
    'dist', // generate.dir
    'node_modules',
    '.**/*',
    '.*',
    'README.md'
  ]
}

Se você quiser evitar a reconstrução quando estiver mudando um ficheiro de configuração, apenas adicione isto a lista pelo fornecimento da opção cache.ignore:

export default {
  generate: {
    cache: {
      ignore: ['renovate.json'] // ignorar mudanças aplicadas sobre este ficheiro
    }
  }
}

A propriedade concurrency

• Tipo: Number
• Valor padrão: 500

A geração de rotas são concorrentes, o generate.concurrency especifica a quantidade de rotas que executam em uma fila.

A propriedade crawler

• Tipo: boolean
• Valor padrão: true

Desde a versão 2.13 do Nuxt, o Nuxt vem com um rastreador instalado que rasteará usas ligações relativas e gerar suas ligações dinâmicas baseada nestas ligações. Se você quiser desativar esta funcionalidade você pode definir o valor para false

export default {
  generate: {
    crawler: false
  }
}

A propriedade dir

• Tipo: String
• Valor padrão: 'dist'

O nome do diretório criado quando estiver construindo aplicações web com uso do comando nuxt generate.

A propriedade devtools

• Tipo: boolean
• Valor padrão: false

Configura a permissão de inspeção para vue-devtools .

Se você já ativou através do ficheiro nuxt.config.js ou outra forma, a ferramenta de desenvolvimento ativa independentemente da bandeira.

A propriedade exclude

• Tipo: Array
  • Itens: String ou RegExp

Ela aceita um arranjo de sequência de caracteres ou expressões regulares e prevenirá a geração de rotas que correspondem a elas. As rotas continuarão a ser acessíveis quando o generate.fallback for usado.

Considere este exemplos de estrutura:

-| pages/
---| index.vue
---| admin/
-----| about.vue
-----| index.vue

Por padrão, a execução do comando nuxt generate criará um ficheiro para cada rota.

-| dist/
---| index.html
---| admin/
-----| about.html
-----| index.html

Quando estiver adicionando uma expressão regular a qual corresponde a todas rotas com o "ignore", ela prevenirá a geração dessas rotas.

export default {
  generate: {
    exclude: [
      /^\/admin/ // o caminho começa com /admin
    ]
  }
}

-| dist/
---| index.html

Você pode também excluir uma rota específica pela atribuição de uma sequência de caracteres:

export default {
  generate: {
    exclude: ['/my-secret-page']
  }
}

A propriedade fallback

• Tipo: String ou Boolean
• Valor padrão: 200.html

export default {
  generate: {
    fallback: '404.html'
  }
}

O caminho para o ficheiro HTML alternativo. Ele deve ser definido como a página de erro, assim também as rotas desconhecidas serão renderizadas através do Nuxt. Se for definida ou não para um valor de falsidade, o nome de um ficheiro HTML alternativo será 200.html. Se for definido para true, o nome de ficheiro será 404.html. Se você fornecer uma sequência de caracteres como um valor, ela será usada no lugar.

fallback: false;

Se estiver trabalhando com páginas estaticamente geradas então é recomendado usar um ficheiro 404.html para páginas de erros e para aqueles cobertos pelo excludes (os ficheiros que você não quer que sejam gerados como páginas estáticas).

fallback: true

Contudo, o Nuxt permite você configurar qualquer página que você quiser, assim se você não quiser usar o ficheiro 200.html ou 404.html, você pode adicionar uma sequência de caracteres e depois você apenas tem de certificar-se de redirecionar para aquela página no lugar.

fallback: 'fallbackPage.html'

Nota: Vários serviços (por exemplo, Netlify) detetam um 404.html automaticamente. Se você configura o seu servidor web por conta própria, consulte a sua documentação para saber como definir uma página de erro (e defina ela para o ficheiro 404.html)

A propriedade interval

• Tipo: Number
• Valor padrão: 0

Intervalo em milissegundos entre dois ciclos de renderização para evitar o transbordar de uma API em potencial com chamadas da aplicação web.

A propriedade minify

• Depreciada!
• Use o build.html.minify no lugar instead

A propriedade routes

• Tipo: Array

Exemplo:

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

Apenas a rota / será gerada pelo Nuxt.

Se você quiser que o Nuxt gere rotas com parâmetros dinâmico, você precisa definir a propriedade generate.routes para um arranjo de rotas dinâmicas.

Nós adicionamos rotas para o /users/:id:

export default {
  generate: {
    routes: ['/users/1', '/users/2', '/users/3']
  }
}

Então quando nós executamos o comando 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

Genial, mas como se nós temos parâmetros dinâmicos?

1. Usa uma Function que retorna uma Promise.
2. Usa uma Function com um callback(err, params).

Função que retorna uma Promessa

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

Função com um callback

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

Acelerando a geração de rota dinâmica com payload

No exemplo acima, estamos usando o user.id do servidor para gerar as rotas mas descartando o resto dos dados. Normalmente, nós precisamos requisitar ele novamente a partir de dentro do /users/_id.vue. Enquanto nós podemos fazer isso, iremos provavelmente precisar definir a propriedade generate.interval para alguma coisa como 100 no sentido não sobrecarregar o servidor com chamadas. Porque isso aumenta o tempo de execução do roteiro generate, seria preferível passar ao longo do objeto user inteiro para o contexto dentro do _id.vue. Nós fazemos isso pela modificação do código acima disto:

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

Agora nós podemos acessar o payload do /users/_id.vue desse jeito:

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

A propriedade subFolders

• Tipo: Boolean
• Valor padrão: true

Por padrão, quando estiver executando o comando nuxt generate, o Nuxt criará um diretório para cada rota e servir um ficheiro index.html.

Exemplo:

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

Quando definida para false, os ficheiros HTML são gerados de acordo com o caminho da rota:

export default {
  generate: {
    subFolders: false
  }
}

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