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:
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”.