Come distribuire l’app Vue?

Cosa devo fare dopo aver sviluppato un’app Vue con vue-cli ?

In Angular c’era un comando che raggruppava tutti gli script in un unico script, quindi questi file venivano inviati all’host.

C’è qualcosa di simile in Vue ?

Penso che tu abbia creato il tuo progetto in questo modo:

 vue init webpack myproject 

Bene, ora puoi correre

 npm run build 

Copia index.html e / dist / cartella nella directory principale del tuo sito web. Fatto.

Se hai creato il tuo progetto usando:

 vue init webpack myproject 

Dovresti impostare il tuo NODE_ENV in produzione ed eseguirlo, perché il progetto ha un web pack configurato sia per lo sviluppo che per la produzione:

 NODE_ENV=production npm run build 

Copia dist/ directory nella directory principale del tuo sito web.

Se si sta distribuendo con Docker, è necessario un server Express che serva la directory 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" ] 

Se assetPublicPath problemi con il tuo percorso, forse hai bisogno di modificare assetPublicPath nel tuo file config/index.js nella sottodirectory:

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

nel tuo terminale

 npm run build 

e tu ospiti la cartella dist. per ulteriori vedere questo video

Questo comando serve per avviare il server di sviluppo:

 npm run dev 

Dove questo comando è per la build di produzione:

 npm run build 

Assicurati di guardare e andare all’interno della cartella generata chiamata ‘dist’.
Quindi avvia tutti questi file sul tuo server.

Un modo per farlo senza usare VUE-CLI è quello di raggruppare tutti i file di script in un file js grasso e quindi fare riferimento a quel grosso file javascript grasso nel file di modello principale.

Preferisco usare webpack come un bundler e creare un webpack.conig.js nella directory principale del progetto. Tutte le configurazioni come entry point, file di output, caricatori, ecc. Sono tutte memorizzate in quel file di configurazione. Successivamente, aggiungo uno script nel file package.json che utilizza il file webpack.config.js per le configurazioni del webpack e inizia a guardare i file e crea un file Js in bundle nella posizione menzionata nel file webpack.config.js.

Il modo migliore e più pulito per farlo è importare il progetto sul tuo server ed eseguire npm run build dal terminale del tuo server, dopo aver installato tutti i moduli e le dipendenze del tuo progetto. In seguito è ansible creare alcuni script sul package.json e assegnargli un comando come npm run deploy per la distribuzione automatica dal computer locale.

In questo modo, non avrai problemi con vue-router (a meno che tu non abbia configurato correttamente il tuo progetto) e inoltre non avrai bisogno di “spostare il tuo index.html e / dist / cartella”.