web-dev-qa-db-fra.com

Comment déployer Vue app?

Que dois-je faire après avoir développé un Vue app avec vue-cli

Dans Angular , une commande regroupait tous les scripts en un seul script, puis ces fichiers étaient envoyés à l'hôte.

Y a-t-il quelque chose de similaire dans Vue

71
artem0071

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é.

105
Egor Stambakio

Si vous avez créé votre projet en utilisant:

vue init webpack myproject

Vous devez définir votre NODE_ENV en production et en exécution, car le pack Web du projet 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" ]
12
akinjide

dans votre terminal

npm run build

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

3
anasmorahhib

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

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

3
jntme

si vous avez utilisé vue-cli et webpack lors de la création de votre projet. 

vous pouvez utiliser juste 

npm lance build commande en ligne de commande et créera un dossier dist dans votre projet. Il suffit de télécharger le contenu de ce dossier sur votre ftp et de le faire. 

1
user3348410

Les commandes pour les codes spécifiques à exécuter sont répertoriées dans votre fichier package.json sous scripts. Voici un exemple de la mienne:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Si vous souhaitez exécuter votre site localement, vous pouvez le tester avec

npm serve

Si vous souhaitez préparer votre site pour la production, vous utiliserez

npm build

Cette commande générera un dossier dist contenant une version compressée de votre site.

1
Gene Yllanes

CE IS POUR DÉPLOYER DANS UN DOSSIER PERSONNALISÉ (si vous vouliez que votre application ne soit pas à la racine, par exemple, URL/myApp /) - I a longtemps cherché cette réponse ... espérons que cela aidera quelqu'un.

Obtenez la VUE CLI à l'adresse https://cli.vuejs.org/guide/ et utilisez la construction de l'interface utilisateur pour simplifier les choses. Ensuite, lors de la configuration, vous pouvez changer le chemin public en/what/et créer un lien vers l'URL/what.

Regardez cette vidéo qui explique comment créer une application vue à l'aide de la CLI si vous avez besoin d'aide supplémentaire: https://www.youtube.com/watch?v=Wy9q22isx

0
Rick K.

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

Je préfère utiliser webpack en tant que bundle et créer un fichier webpack.conig.js dans le répertoire racine du projet. Toutes les configurations telles que le point d’entrée, le fichier de sortie, les chargeurs, etc. sont toutes stockées 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, je commence à regarder les fichiers et crée un fichier Js fourni à l’emplacement mentionné dans le fichier webpack.config.js.

0
Yash_6795
  1. npm run build - cela va altérer et minimiser les codes

  2. enregistrer le fichier index.html et dist dans le répertoire racine de votre site Web.

  3. service d'hébergement gratuit qui pourrait vous intéresser - Hébergement Firebase.

0
user10543871

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

npm run dev

Où cette commande est pour la construction de production:

npm run build

Assurez-vous de regarder et d'aller dans le dossier généré appelé 'dist'.
Puis démarrez Poussez tous ces fichiers sur votre serveur.

0
Farcrew Rz

Je pense que tu peux utiliser vue-cli

Si vous utilisez Vue CLI avec une infrastructure backend qui gère les actifs statiques dans le cadre de son déploiement, vous devez simplement vous assurer que Vue CLI génère les fichiers générés au bon emplacement, puis suivez les instructions de déploiement de votre infrastructure backend. .

Si vous développez votre application frontale séparément de votre backend - c'est-à-dire que votre backend expose une API à laquelle votre frontend peut parler, votre frontend est essentiellement une application purement statique. Vous pouvez déployer le contenu généré dans le répertoire dist sur n’importe quel serveur de fichiers statiques, mais veillez à définir le bon baseUrl.

0
Loveun CG

Si vous souhaitez créer et envoyer sur votre serveur distant, vous pouvez utiliser le service client ( https://cli.vuejs.org/guide/cli-service.html ), vous pouvez créer des tâches à build et un à déployer avec des plugins spécifiques comme vue-cli-plugin-s3-deploy

0