Comment déployer Vue app?

Question

Que dois-je faire après avoir développé une application Vue 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 ?

Answer 1

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

Answer 2

Si vous avez créé votre projet à l'aide de:

vue init webpack myproject

Vous aurez besoin de définir votre NODE_ENV de la production et de l'exécution, parce que le projet a web pack configuré pour à la fois le développement et la production:

NODE_ENV=production npm run build

Copiez dist/ répertoire racine de votre site web répertoire.

Si vous déployez avec Docker, vous auriez besoin d'un server express, service de la dist/ répertoire.

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

Answer 3

dans votre terminal

 npm run build
 

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

Answer 4

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

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

Answer 5

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

vous pouvez utiliser juste

npm lance la commande de construction 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.