Comandos e Implantação

A Nuxt vem com um conjunto de comandos úteis, tanto para fins de desenvolvimento como de produção.

Usar no package.json

Devemos ter estes comandos no nosso package.json:

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

Podemos executar os nossos comandos via yarn <command>ou npm run <command> (exemplo: yarn dev / npm run dev).

Ambiente de Desenvolvimento

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

yarn dev

npm run dev

Lista de Comandos

Podemos executar comandos diferentes consoante o destino :

destino: server (valor predefinido)

• nuxt dev — Executar o servidor de desenvolvimento.
• nuxt build — Construir e otimizar a nossa aplicação com a Webpack para produção.
• nuxt start — Iniciar o servidor de produção (após executar nuxt build). O utilizámos para a hospedagem de Node.js, como a Heroku, a Digital Ocean, etc.

destino: static

• nuxt dev — Executar o servidor de desenvolvimento.
• nuxt generate — Construir a aplicação (se necessário), gerar cada rota como um ficheiro .html e exportar estaticamente para o diretório dist/ (usado para a hospedagem estática).
• nuxt start — Servir o diretório dist/ como a nossa hospedagem estática faria (Netlify, Vercel, Surge, etc), ótimo para testar antes de implantar.

Inspeção da Configuração da Webpack

Podemos inspecionar a configuração da Webpack utilizada pela Nuxt para construir o projeto (semelhante à inspeção de vue ).

• nuxt webpack [query...]

Argumentos:

• --name: Nome do pacote a inspecionar (cliente, servidor, moderno).
• --dev: Inspecionar a configuração da Webpack para o modo de desenvolvimento.
• --depth: Profundidade de inspeção. A predefinição é 2 para evitar a saída detalhada.
• --no-colors: Desativar as cores do Instituto Nacional Americano de Normas (ANSI) (desativadas por predefinição quando a Máquina de Escrever À Distância (TTY) não está disponível ou ao se canalizar 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"

Implantação da Produção

A Nuxt permite-nos escolher entre as implantações de Servidor ou Estática.

Implantação de Servidor

Para implantar uma aplicação de interpretação do lado do servidor (SSR) usamos target: 'server', onde 'server' é o valor predefinido:

yarn build

npm run build

A Nuxt criará um diretório .nuxt com tudo dentro, pronto para ser implantado na nossa hospedagem de servidor:

Uma vez que a nossa aplicação esteja construída, podemos usar o comando start para ver uma versão de produção da nossa aplicação:

yarn start

npm run start

Implantação Estática (Pré-interpretada)

A Nuxt dá-nos a possibilidade de hospedar a nossa aplicação da Web em qualquer hospedagem estática.

Para implantar um sítio gerado de maneira estática, precisamos ter certeza de que temos target: 'static' no nosso nuxt.config.js (para Nuxt >= 2.13):

export default {
  target: 'static'
}

yarn generate

npm run generate

A Nuxt criará um diretório dist/ com tudo dentro, pronto para ser implantado num serviço de hospedagem estática.

Desde a versão 2.13 da Nuxt, existe um rastreador instalado que agora rastreará os nossos marcadores de hiperligações e gerará nossas rotas quando usarmos o comando nuxt generate baseado nestas hiperligações.

Falha no Erro

Para retornar um código de estado diferente de zero quando um erro de página é encontrado e deixar a integração contínua e entrega contínua falhar na implantação ou construção, podemos usar o argumento --fail-on-error:

yarn generate --fail-on-error

npm run generate --fail-on-error

O Que Se Segue?