Desdobrar o Nuxt no Netlify

Como desdobrar uma aplicação Nuxt no Netlify?

Desdobrar no Netlify é uma opção com baixa fricção para ter um site Nuxt estaticamente gerado online rapidamente.

O centro do processo influencia o comando nuxt generate(<= v2.12) durante o desdobramento para construir uma versão estática da sua aplicação Nuxt dentro do diretório dist. Os conteúdos deste diretório são então enviados para uma URL de produção.

Começar

Pressione o botão "New site from Git (Novo sítio a partir do Git)" no painel de controlo do Netlify. Autentique com o hospedeiro do seu repositório, selecione um repositório para desdobrar, e continue. Você deve parar no passo 3: "Build options, and deploy! (Opções de construção, e desdobrar!)"

Configurar:

Para um site estaticamente gerado

Certifique-se que você tem o target: 'static' dentro do seu nuxt.config.

1. Ramo para desdobrar: main, ou qualquer ramo que você preferir
2. Comando para construir: npm run generate
3. Diretório para publicar: dist

Para renderização apenas no lado do cliente

Certifique-se que você tem o target: 'static' e ssr: false dentro do seu nuxt.config.

1. Ramo para desdobrar: main, ou qualquer ramo que você preferir
2. Comando para construir: npm run generate
3. Diretório para publicar: dist

Para renderização no lado do cliente existe um problema com a atualização visto que por padrão no Netlify o sítio redireciona para "404 não encontrado". Para quaisquer páginas que não são geradas elas recuarão para o modo de Aplicação de Página Única e então se você atualizar ou partilhar aquela ligação você receberá a página 404 do Netlify. Isto é porque as páginas que são geradas não existem de fato visto que elas realidade estão em uma aplicação de página única assim se você atualizar esta página você receberá um 404 porque a url para aquela página não existe de fato. Ao redirecionar para o 404.html o Nuxt recarregará a sua página corretamente no recuo da Aplicação de Página Única.

A maneira mais fácil para corrigir isso é adicionar uma propriedade generate no seu ficheiro nuxt.config.js e definir o fallback: true. Assim ela recuará para a página 404.html gerada quando estiver no mode de Aplicação de Página Única ao invés da página 404 do Netlify.

export default {
  generate: {
    fallback: true
  }
}

Se no entanto você quiser automaticamente aplicar cabeçalhos e redirecionamentos na aplicação, existe um módulo para isso, isto é especialmente útil para quando você tiver de personalizar os cabeçalhos/redirecionamentos (em um ficheiro _headers ou _redirects):

netlify-files-module

Para mais informações sobre redirecionamentos no Netlify consulte a documentação Netlify .

Para referência simples sobre os redirecionamentos no Netlify leia a publicação de blogue escrito por Divya Sasidharan

Opcionalmente, você pode adicionar variáveis de ambiente adicionais através do botão "Advanced (Avançado)". Estes podem ser úteis para trocas em credencias de API alternativa e assim por diante. O Netlify também fornece variáveis de ambiente padrão as quais podem ser lidas pela sua aplicação do Nuxt em tempo de construção.

Clique em "Deploy site (Desdobrar o sítio)" para desdobrar imediatamente. Ao seu sítio no Netlify será atribuído uma URL aleatória e desdobrado usando o comando nuxt generate.

Voilà! A sua aplicação Nuxt agora está hospedada no Netlify!