Comment déployer l’application Vue?

Que dois-je faire après avoir développé une application Vue avec vue-cli ?

Dans Angular , certaines commandes regroupent tous les scripts en un seul script, puis ces fichiers sont envoyés à l’hôte.

Y a-t-il quelque chose de pareil dans Vue ?

Je pense que vous avez créé votre projet comme ceci:

 vue init webpack myproject 

Eh bien, maintenant vous pouvez courir

 npm run build 

Copiez les fichiers index.html et / dist / dans le répertoire racine de votre site Web. Terminé.

Si vous avez créé votre projet en utilisant:

 vue init webpack myproject 

Vous devez définir NODE_ENV sur production et exécution, car le pack Web est configuré pour le développement et la production:

 NODE_ENV=production npm run build 

Copiez le répertoire dist/ dans le répertoire racine de votre site Web.

Si vous déployez avec Docker, vous aurez besoin d’un serveur express, servant le répertoire dist/ .

Dockerfile

 FROM node:carbon RUN mkdir -p /usr/src/app WORKDIR /usr/src/app ADD . /usr/src/app RUN npm install ENV NODE_ENV=production RUN npm run build # Remove unused directories RUN rm -rf ./src RUN rm -rf ./build # Port to expose EXPOSE 8080 CMD [ "npm", "start" ] 

Si vous rencontrez des problèmes avec votre chemin, vous devrez peut-être remplacer le assetPublicPath de votre fichier config/index.js par votre sous-répertoire:

http://vuejs-templates.github.io/webpack/backend.html

dans votre terminal

 npm run build 

et vous hébergez le dossier dist. pour plus voir cette vidéo

Cette commande est pour démarrer le serveur de développement:

 npm run dev 

Où cette commande est pour la version de production:

 npm run build 

Assurez-vous de regarder et d’aller dans le dossier généré appelé «dist».
Ensuite, lancez tous ces fichiers sur votre serveur.

Une façon de le faire sans utiliser VUE-CLI est de regrouper tous les fichiers de script dans un fichier fat js, puis de référencer ce gros fichier javascript dans le fichier de modèle principal.

Je préfère utiliser webpack en tant que bundler et créer un fichier webpack.conig.js dans le répertoire racine du projet. Tous les parameters tels que le point d’entrée, le fichier de sortie, les chargeurs, etc. sont tous stockés dans ce fichier de configuration. Après cela, j’ajoute un script dans le fichier package.json qui utilise le fichier webpack.config.js pour les configurations Webpack et commence à regarder les fichiers et crée un fichier contenant Js dans l’emplacement mentionné dans le fichier webpack.config.js.

La meilleure et la plus propre méthode consiste à importer le projet sur votre serveur et à exécuter npm run build partir du terminal de votre serveur, après avoir installé tous les modules et dépendances de votre projet. Vous pouvez ensuite créer un script sur votre package.json et lui donner une commande comme npm run deploy pour se déployer automatiquement à partir de votre ordinateur local.

De cette façon, vous n’aurez pas de problèmes avec vue-router (sauf si vous n’avez pas configuré correctement votre projet) et vous n’aurez pas non plus à “déplacer vos index.html et / dist / folder”.