Commandes et déploiement

Nuxt.js 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.

Déploiement de production

Nuxt.js 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.js créera un répertoire .nuxt avec tout ce qu'il contient prêt à être déployé sur votre serveur d'hébergement.

nous recommandons de mettre .nuxt dans .npmignore ou .gitignore.

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.js 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:)

nuxt.config.js
export default {
  target: 'static'
}
yarn generate
npm run generate

Nuxt.js 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.

Attention: les routes dynamiques sont ignorées par la commande generate lors de l'utilisation Nuxt <= v2.12: API de configuration de la génération

Lors de la génération de votre application Web avec nuxt generate, le contexte donnée à asyncData et fetch n'aura pas req et res.

É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?

Lisez notre FAQ pour trouver des exemples de déploiements sur des hôtes connus.

Contributeurs

Vous avez vu une erreur ou vous souhaitez contribuer à la documentation ? Éditez cette page sur GitHub !