Comandos e desdobramento

O Nuxt oferece um conjunto de comandos úteis, tanto para fins de desenvolvimento como para produção.

Usando no package.json

Você deve ter esses comandos no seu package.json:

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

Você pode executar os seus comandos via yarn <command>ou npm run <command> (exemplo: yarn dev / npm run dev).

Ambiente de desenvolvimento

Para iniciar o Nuxt em modo de desenvolvimento com a substituição instantânea de módulo em http://localhost:3000:

yarn dev

npm run dev

Lista de comandos

Você pode executar diferentes comandos dependendo do alvo :

target: server (valor padrão)

• nuxt dev - Inicia o servidor de desenvolvimento.
• nuxt build - Constrói e otimiza a sua aplicação com webpack para produção.
• nuxt start - Inicia o servidor de produção (depois de rodar nuxt build). Use ele para hospedagem de Node.js como Heroku, Digital Ocean, etc.

target: static

• nuxt dev - Inicia o servidor de desenvolvimento.
• nuxt generate - Constrói a aplicação (se necessário), gera todas as rotas como um arquivo HTML e exporta estaticamente para o diretório dist/ (usado para hospedagem estática).
• nuxt start - Serve o diretório dist/ como sua hospedagem estática faria (Netlify, Vercel, Surge, etc), ótimo para testar antes do desdobramento.

Inspeção da configuração do Webpack

Você pode inspecionar a configuração do webpack usada pelo Nuxt para construir o projeto (similar ao vue inspect ).

• nuxt webpack query...

Argumentos:

• --name: Nome do pacote a inspecionar. (client, server, modern)
• --dev: Inspeciona a configuração do webpack para modo de desenvolvimento
• --depth: Inspeção profunda. O valor padrão é 2 para evitar saída verbosa.
• --no-colors: Desativa as cores ANSI (desativado por padrão quando o TTY não está disponível ou quando estiver canalizando para um ficheiro)

Exemplos:

• nuxt webpack
• nuxt webpack devtool
• nuxt webpack resolve alias
• nuxt webpack module rules
• nuxt webpack module rules test=.jsx
• nuxt webpack module rules test=.pug oneOf use.0=raw
• nuxt webpack plugins constructor.name=WebpackBar options reporter
• nuxt webpack module rules loader=vue-
• nuxt webpack module rules "loader=.*-loader"

Desdobramento de produção

Nuxt deixa você escolher entre os desdobramentos de servidor ou estático.

Desdobramento de servidor

Para desdobrar uma aplicação renderizada no lado do servidor (SSR) nós usamos target: 'server', onde server é o valor padrão.

yarn build

npm run build

Nuxt criará um diretório .nuxt com tudo pronto para ser desdobrado na sua hospedagem de.

Uma vez que sua aplicação está construída você pode usar o comando start para ver a versão de produção da sua aplicação.

yarn start

npm run start

Desdobramento estático (Pré-renderizado)

O Nuxt dá para você habilidade de hospedar a sua aplicação web em qualquer hospedagem estática.

Para desdobrar um sitio estático gerado, certifique-se de ter o target: 'static' dentro do seu ficheiro nuxt.config.js (para versões do Nuxt maiores ou igual a 2.13):

export default {
  target: 'static'
}

yarn generate

npm run generate

O Nuxt criará um diretório .nuxt com tudo pronto para ser hospedado em um serviço de hospedagem de sítios estáticos.

A partir da versão 2.13 do Nuxt, existe um rastreador instalado que agora rastreará seus marcadores de ligação e gerará suas rotas baseadas naquelas ligações quando estiver usando o comando nuxt generate.

Falha sobre erro

Para retornar um código de estado diferente de zero quando um erro de página for encontrado e permitir o CI/CD falhar o desdobramento ou a construção, você pode usar o argumento --fail-on-error.

yarn generate --fail-on-error

npm run generate --fail-on-error

Qual é o próximo?