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

In Angular c'erano alcuni comandi che raggruppavano tutti gli script in un singolo script e quindi questi file venivano inviati all'host.

C'è qualcosa di uguale 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 la NODE_ENVproduzione e l'esecuzione, perché il progetto ha un web pack configurato sia per lo sviluppo che per la produzione:

NODE_ENV=production npm run build

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

Se stai eseguendo la distribuzione con Docker, avresti bisogno di un server express, che serve la dist/directory.

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

nel tuo terminale

npm run build

e si ospita la cartella dist. per di più vedi questo video

Se si esegue in problemi con il vostro percorso, forse avete bisogno di cambiare il assetPublicPathnel config/index.jsfile alla sottodirectory:

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

I comandi per quali codici specifici eseguire sono elencati all'interno del file package.json sotto gli script. Ecco un mio esempio:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Se stai cercando di eseguire il tuo sito localmente, puoi provarlo con

npm serve

Se stai cercando di preparare il tuo sito per la produzione, dovresti utilizzarlo

npm build

Questo comando genererà una cartella dist con una versione compressa del tuo sito.

Per distribuire l'applicazione in ambiente di produzione aggiungere

"build": "vue-cli-service build --mode prod"

nei tuoi script nel file package.json.

Apri main.js e aggiungi

Vue.config.productionTip = false;

subito dopo le tue importazioni. Quindi apri il tuo cli nella cartella del progetto ed esegui questo comando

npm run build

Questo renderà una cartella dist nella directory del tuo progetto che potresti caricare quella cartella dist nel tuo host e il tuo sito web sarà attivo

Questo comando serve per avviare il server di sviluppo:

npm run dev

Dove si trova questo comando per la build di produzione:

npm run build

Assicurati di guardare e andare all'interno della cartella generata chiamata 'dist'.
Quindi inizia a inviare tutti quei file sul tuo server.

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

Preferisco usare webpack come bundler e creare un webpack.conig.js nella directory principale del progetto. Tutte le configurazioni come punto di ingresso, 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 inizio a guardare i file e creo un file in bundle Js nella posizione menzionata nel file webpack.config.js.

Penso che tu possa usare vue-cli

Se si utilizza l'interfaccia della riga di comando di Vue insieme a un framework di back-end che gestisce le risorse statiche come parte della sua distribuzione, è sufficiente assicurarsi che l'interfaccia della riga di comando di Vue generi i file creati nella posizione corretta, quindi seguire le istruzioni di distribuzione del framework di back-end .

Se stai sviluppando la tua app front-end separatamente dal tuo back-end, ovvero il tuo back-end espone un'API con cui il tuo front-end può parlare, allora il tuo front-end è essenzialmente un'app puramente statica. È possibile distribuire il contenuto creato nella directory dist su qualsiasi file server statico, ma assicurarsi di impostare la baseUrl corretta

1. npm run build - questo permetterà di ridurre al minimo e minimizzare i codici

2. salva index.html e la cartella dist nella directory principale del tuo sito web.

3. servizio di hosting gratuito che potrebbe interessarti - Firebase hosting.

se hai usato vue-cli e webpack quando hai creato il tuo progetto.

puoi usare solo

npm esegue il comando build nella riga di comando e creerà la cartella dist nel progetto. Basta caricare il contenuto di questa cartella sul tuo ftp e il gioco è fatto.

QUESTO È PER IL DEPLOYING A UNA CARTELLA PERSONALIZZATA (se volevi che la tua app non fosse root, ad esempio URL / myApp /) - Ho cercato a lungo di trovare questa risposta ... spero che aiuti qualcuno.

Ottieni l' interfaccia della riga di comando VUE su https://cli.vuejs.org/guide/ e utilizza la build dell'interfaccia utente per semplificare. Quindi, nella configurazione, puoi cambiare il percorso pubblico in / qualunque / e collegarti al suo URL / qualunque.

Guarda questo video che spiega come creare un'app Vue utilizzando l'interfaccia della riga di comando se hai bisogno di ulteriore aiuto: https://www.youtube.com/watch?v=Wy9q22isx3U

La documentazione di Vue fornisce molte informazioni su come distribuire a diversi provider host.

npm run build

Puoi trovarlo dal file json del pacchetto. sezione script. Fornisce script per test, sviluppo e costruzione per la produzione.

Puoi utilizzare servizi come netlify che raggrupperanno il tuo progetto collegando il tuo repository github del progetto dal loro sito. Fornisce inoltre informazioni su come distribuire su altri siti come heroku.

Puoi trovare maggiori dettagli su questo qui

Prima installa Vue Cli a livello globale

npm install -g @vue/cli

Per creare un nuovo progetto, eseguire:

vue create project-name

corri vue

npm run serve 

Vue CLI> = 3 utilizza lo stesso binario vue, quindi sovrascrive Vue CLI 2 (vue-cli). Se hai ancora bisogno della funzionalità legue vue init, puoi installare un bridge globale:

Vue Init a livello globale

npm install -g @vue/cli-init

vue init ora funziona esattamente come vue-cli@2.x

Vue Create App

vue init webpack my-project

Esegui il server per sviluppatori

npm run dev

Se vuoi compilare e inviare al tuo server remoto puoi usare cli-service ( https://cli.vuejs.org/guide/cli-service.html ) puoi creare attività da servire, costruire e una da distribuire con alcuni plugin specifici comevue-cli-plugin-s3-deploy