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 ?
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 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" ]
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:
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.
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.
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
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.
npm run build - cela va altérer et minimiser les codes
enregistrer le fichier index.html et dist dans le répertoire racine de votre site Web.
service d'hébergement gratuit qui pourrait vous intéresser - Hébergement Firebase.
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.
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.
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