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 ?

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

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

dans votre terminal

npm run build

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

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

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.

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

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

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.

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.

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

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.

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.

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

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 [email protected]

Vue Create App

vue init webpack my-project

Exécuter le serveur de développement

npm run dev

Si vous souhaitez construire et envoyer à votre serveur distant, vous pouvez utiliser cli-service ( https://cli.vuejs.org/guide/cli-service.html ), vous pouvez créer des tâches à servir, construire et une à déployer avec certains plugins spécifiques commevue-cli-plugin-s3-deploy