Comment déployer l'application Vue?


132

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

Dans Angular, il y avait une commande qui regroupait tous les scripts dans un seul script, puis ces fichiers sont envoyés à l'hôte.

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


Il devrait faire partie du cli, voici la page de documentation de déploiement vuejs.org/v2/guide/deployment.html Selon la version que vous avez, le modèle que vous utilisez, cela sera probablement un peu différent. Mais vous devez spécifier que vous effectuez une version de production comme dans la documentation.
Swimburger

2
J'utilise la vue 2.2.1. Je vois la documentation, mais il n'y a aucune information sur le déploiement. Je n'utilise pas nodejs sur l'hébergeur. Donc, quand je le démarre dans localhost, cela fonctionne, mais lorsque je télécharge tous les fichiers vers l'hébergeur, il n'y a rien sur la page
artem0071

8
Lorsque vous faites une compilation, il compilera probablement tous les fichiers (html, css, js) dans un dossier / dist. Ce dossier dist doit être la racine de votre application sur votre hébergement. (Je n'ai pas encore utilisé Vue2, mais je parie que ce sera là)
Swimburger

Hé les gars, j'ai eu ce même problème la semaine dernière et j'ai écrit si cela aide quelqu'un: medium.com/@seenickcode
...

J'ai téléchargé les fichiers du dossier dist vers cpanel, mais il ne s'affiche que vide
Fayaz

Réponses:


171

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

vue init webpack myproject

Eh bien, maintenant tu peux courir

npm run build

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


1
N'y a-t-il pas besoin de courir npm startou quelque chose comme ça?
nu everest

@nueverest si vous venez de créer votre projet avec vue init webpack myprojectvous verrez des instructions supplémentaires dans votre console: cd myproject, npm install. Une fois npm installtous les packages téléchargés et vue est capable de compiler avec soit npm run devpour le serveur de développement + rechargement à chaud, soit avec npm run buildpour créer un bundle déployable.
Egor Stambakio

Cela ne semble pas fonctionner avec le routeur vue ... Est-ce que je fais quelque chose de mal?
Andy Hayden

1
@AndyHayden une vérification AWS S3 si 1) index et document d'erreur === index.html; 2) des politiques sont définies pour les sites Web statiques ; 3) votre dossier build.jsest à l'intérieur distde s3 et index.htmlest à la racine
Egor Stambakio

9
la réponse devrait être « le contenu du distdossier est tout ce dont vous avez besoin. Vous n'avez pas besoin de copier /index.htmlmais seulement index.htmldans le distdossier est nécessaire. En outre, avant d'exécuter npm run buildvous devez configurer votre chemin de production config/index.js».
David 天宇 Wong

24

Si vous avez créé votre projet en utilisant:

vue init webpack myproject

Vous devez configurer votre NODE_ENVproduction et votre exécution, car le projet a un pack Web configuré pour le développement et la production:

NODE_ENV=production npm run build

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

Si vous déployez avec Docker, vous aurez besoin d'un serveur express, servant l' dist/annuaire.

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

exposez-vous ce conteneur à l'extérieur ou utilisez-vous nginx ou apache comme proxy?
Hakim

Ouais, vous utiliseriez Apache ou Nginx comme proxy, port 80
akinjide

paste.ubuntu.com/p/dryhSwnYh5 WORKDIR / usr / src / app peut être WORKDIR / app? également CMD ["http-server", "dist"] nécessaire pour servir via le serveur http? au lieu de CMD ["npm", "start"]
LOG_TAG

Version: webpack 3.12.0 Durée: 16548ms Morceaux de taille d'actif Noms des morceaux build.js 2,15 Mo 0 [émis] [gros] main build.js.map 9,74 Mo 0 [émis] main - Cela se produit après l'exécution de la cmd ci-dessus dans le projet dossier - pouvez-vous s'il vous plaît me guider à travers la prochaine étape pour entrer en direct? -
Hamendra Sunthwal

7

dans votre terminal

npm run build

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


Cela suppose à tort qu'un script de génération existe dans package.json.
crash springfield

4
@crashspringfield Une hypothèse précise à faire lorsque l'OP demande spécifiquement à propos d'une application Vue créée avecvue-cli
Dan Fletcher

4

Si vous rencontrez des problèmes avec votre chemin, vous devez peut-être changer le assetPublicPathdans votre config/index.jsfichier dans votre sous-répertoire:

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


Assurez-vous de changer build: {..... assetsPublicPath: './', que les points avant la barre oblique sont importants. Mais il existe également un assetsPublinPath dans l'objet dev de ce fichier, alors assurez-vous de changer le bon.
Shane G du

Version: webpack 3.12.0 Durée: 16548ms Morceaux de taille d'actif Noms des morceaux build.js 2,15 Mo 0 [émis] [gros] main build.js.map 9,74 Mo 0 [émis] main - Cela se produit après l'exécution de la cmd ci-dessus dans le projet dossier - pouvez-vous s'il vous plaît me guider à travers la prochaine étape pour entrer en direct? -
Hamendra Sunthwal

2

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

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

npm build

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


1

Pour déployer votre application dans l'environnement de production, ajoutez

"build": "vue-cli-service build --mode prod"

dans vos scripts dans le fichier package.json.

Ouvrez votre main.js et ajoutez

Vue.config.productionTip = false;

juste après vos importations. Ensuite, ouvrez votre cli dans le dossier du projet et exécutez cette commande

npm run build

Cela créera un dossier dist dans le répertoire de votre projet, vous pourrez télécharger ce dossier dist dans votre hôte et votre site Web sera en ligne


1

La documentation vue fournit de nombreuses informations à ce sujet sur la façon dont vous pouvez déployer sur différents fournisseurs d'hôtes.

npm run build

Vous pouvez le trouver dans le fichier json du package. section scripts. Il fournit des scripts pour les tests et le développement et la construction pour la production.

Vous pouvez utiliser des services tels que netlify qui regrouperont votre projet en reliant votre dépôt github du projet à partir de leur site. Il fournit également des informations sur la façon de déployer sur d'autres sites tels que heroku.

Vous pouvez trouver plus de détails à ce sujet ici


Cela crée un dossier dist contenant JS / CSS et HTML pour un déploiement facile dans n'importe quel service d'hébergement
Tyler Morales il y a

0

Cette commande permet de 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, commencez à pousser tous ces fichiers sur votre serveur.


0

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

Je préfère utiliser webpack comme bundler et créer un 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 et commence à regarder les fichiers et crée un fichier groupé Js à l'emplacement mentionné dans le fichier webpack.config.js.


0

Je pense que vous pouvez utiliser vue-cli

Si vous utilisez Vue CLI avec un framework backend qui gère les actifs statiques dans le cadre de son déploiement, tout ce que vous avez à faire est de vous assurer que Vue CLI génère les fichiers construits au bon emplacement, puis suivez les instructions de déploiement de votre framework backend .

Si vous développez votre application frontend séparément de votre backend - c'est-à-dire que votre backend expose une API à laquelle votre frontend doit parler, alors votre frontend est essentiellement une application purement statique. Vous pouvez déployer le contenu intégré dans le répertoire dist sur n'importe quel serveur de fichiers statiques, mais assurez-vous de définir la baseUrl correcte


vous avez raison, mais comme le montre la réponse acceptée, la question était de savoir quelle commande exécuter après
JR Utily

0
  1. npm run build - cela va uglifier et minimiser les codes

  2. enregistrez le dossier 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

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

vous pouvez utiliser juste

npm exécutez la commande build en ligne de commande, et il créera un dossier dist dans votre projet. Téléchargez simplement le contenu de ce dossier sur votre ftp et c'est fait.


il suffit de télécharger le dossier dist sur votre ftp et c'est fait? & comment accéder à l'application Vue sur le serveur?
Hamendra Sunthwal

0

CECI EST POUR DÉPLOYER VERS UN DOSSIER PERSONNALISÉ (si vous vouliez que votre application ne soit pas en racine, par exemple URL / myApp /) - J'ai cherché pendant longtemps pour trouver cette réponse ... j'espère que cela aidera quelqu'un.

Obtenez la CLI VUE sur https://cli.vuejs.org/guide/ et utilisez la version de l'interface utilisateur pour vous faciliter la tâche. Ensuite, dans la configuration, vous pouvez changer le chemin public vers / quel que soit / et créer un lien vers lui URL / peu importe.

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=Wy9q22isx3U


0

Installez d'abord Vue Cli dans le monde

npm install -g @vue/cli

Pour créer un nouveau projet, exécutez:

vue create project-name

courir vue

npm run serve 

Vue CLI> = 3 utilise le même binaire vue, donc il écrase Vue CLI 2 (vue-cli). Si vous avez toujours besoin de l'ancienne fonctionnalité vue init, vous pouvez installer un pont global:

Vue Init dans le monde

npm install -g @vue/cli-init

vue init fonctionne maintenant exactement de la même manière que vue-cli@2.x

Vue Create App

vue init webpack my-project

Exécuter le serveur de développement

npm run dev

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.