Nuxt est livré avec un ensemble de commandes utiles, à la fois pour le développement et la production.

Utilisation dans package.json

Vous devriez mettre ces commandes dans package.json:

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

Ensuite, vous pouvez lancer vos commandes via yarn <command> ou npm run <command> (exemple: yarn dev / npm run dev).

Environment de développement

Pour lancer Nuxt en mode développement avec le module de remplacement à chaud sur http://localhost:3000:

yarn dev

npm run dev

Liste des commandes

Vous pouvez exécuter différentes commandes en fonction de la cible :

target: server (default value)

• nuxt dev - Lancez le serveur de développement.
• nuxt build - Créez et optimisez votre application avec Webpack pour la production.
• nuxt start - Démarrez le serveur de production (après avoir lancé nuxt build). Utiliser pour un hébergement Node.js comme Heroku, Digital Ocean, etc.

target: static

• nuxt dev - Lancez le serveur de développement.
• nuxt generate - Construisez l'application (si nécessaire), générez chaque route sous forme de fichier HTML et exportez statiquement vers le répertoire dist/ (utilisé pour l'hébergement statique).
• nuxt start - servir le répertoire dist/ comme le ferait votre hébergement statique (Netlify, Vercel, Surge, etc.), idéal pour les tests avant le déploiement.

Webpack Config Inspection

Vous pouvez inspecter la configuration webpack utilisée par nuxt pour créer un projet similaire à vue inspect .

• nuxt webpack query...

Arguments:

• --name: nom du bundle à inspecter (client, serveur, moderne)
• --dev: inspecter la configuration webpack pour le mode dev
• --depth: inspecter en profondeur. La valeur par défaut est 2 pour empêcher la sortie verbeuse.
• --no-colors: désactiver les couleurs ANSI (désactivées par défaut lorsque TTY n'est pas disponible ou quand piping vers un fichier)

Exemples:

• 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"

Déploiement de production

Nuxt vous permet de choisir entre les déploiements de serveur ou statique.

Déploiement de serveur

Pour déployer une application SSR, nous utilisons target: server, où serveur est la valeur par défaut.

yarn build

npm run build

Nuxt créera un répertoire .nuxt avec tout ce qu'il contient prêt à être déployé sur votre serveur d'hébergement.

Une fois votre application créée, vous pouvez utiliser la commande start pour voir une version de production de votre application.

yarn start

npm run start

Déploiement statique (Pré-rendu)

Nuxt vous donne la possibilité d'héberger votre application Web sur n'importe quel hébergement statique.

Pour déployer un site statique généré, assurez-vous d'avoir target: static dans votre nuxt.config.js.(Pour Nuxt >= 2.13:)

export default {
  target: 'static'
}

yarn generate

npm run generate

Nuxt créera un répertoire dist / avec tout ce qu'il contient prêt à être déployé sur un service d'hébergement statique.

Depuis Nuxt v2.13, un robot d'exploration est installé qui va maintenant explorer vos liens et générer vos routes lorsque vous utilisez la commande nuxt generate basée sur ces derniers.

Échec en cas d'erreur

Pour renvoyer un code d'état différent de zéro lorsqu'une erreur de page est rencontrée et laisser le CI/CD échouer lors du déploiement ou de la construction, vous pouvez utiliser l'argument --fail-on-error.

yarn generate --fail-on-error

npm run generate --fail-on-error

Et après?