Wie stelle ich die Vue-App bereit?

129

Was soll ich nach der Entwicklung einer Vue- App tun vue-cli?

In Angular gab es einen Befehl, der alle Skripte in einem einzigen Skript bündelt. Anschließend werden diese Dateien an den Host gesendet.

Gibt es in Vue etwas Ähnliches ?

artem0071
quelle
Es sollte Teil der CLI sein. Hier ist die Bereitstellungsdokumentseite vuejs.org/v2/guide/deployment.html. Je nachdem, welche Version Sie haben und welche Vorlage Sie verwenden, wird sie sich wahrscheinlich geringfügig unterscheiden. Sie sollten jedoch angeben, dass Sie einen Produktionsbuild wie in den Dokumenten ausführen.
Swimburger
2
Ich benutze 2.2.1 vue. Ich sehe die Dokumentation, aber es gibt keine Informationen zur Bereitstellung. Ich verwende keine NodeJS auf dem Hoster. Also, wenn ich es in localhost starte, funktioniert es, aber wenn ich alle Dateien auf Hoster herunterlade, gibt es nichts auf der Seite
artem0071
8
Wenn Sie einen Build ausführen, werden wahrscheinlich alle Dateien (HTML, CSS, JS) in einen Ordner / dist kompiliert. Dieser dist-Ordner sollte das Stammverzeichnis Ihrer App auf Ihrem Hosting sein. (Ich habe Vue2 noch nicht benutzt, aber ich wette, es wird da sein)
Swimburger
Hey Leute, ich hatte letzte Woche das gleiche Problem und schrieb etwas auf, wenn es jemandem hilft: medium.com/@seenickcode/…
Seenickcode
Ich habe die Dateien aus dem dist-Ordner auf cpanel hochgeladen, aber es wird nur leer angezeigt
Fayaz

Antworten:

169

Ich denke, Sie haben Ihr Projekt so erstellt:

vue init webpack myproject

Nun kannst du rennen

npm run build

Kopieren Sie die Ordner index.html und / dist / in das Stammverzeichnis Ihrer Website. Getan.

Egor Stambakio
quelle
1
Muss man nicht rennen npm startoder so?
Nu Everest
@nueverest Wenn Sie gerade Ihr Projekt mit erstellt haben vue init webpack myproject, werden weitere Anweisungen in Ihrer Konsole angezeigt : cd myproject, npm install. Nachdem npm installalle Pakete heruntergeladen wurden und vue entweder mit npm run devfür Entwicklungsserver + Hot Reload kompilieren oder npm run buildein bereitstellbares Bundle erstellen kann.
Egor Stambakio
Dies scheint mit dem Vue-Router nicht zu funktionieren ... Mache ich etwas falsch?
Andy Hayden
1
@AndyHayden eine AWS S3-Prüfung, ob 1) Index & Fehlerdokument === index.html; 2) Richtlinien werden für statische Websites festgelegt ; 3) Ihr build.jsbefindet sich in dists3 im Ordner und index.htmlbefindet sich im Stammverzeichnis.
Egor Stambakio
9
Die Antwort sollte „der Inhalt des distOrdners ist alles was Sie brauchen. Sie brauchen nicht zu kopieren , /index.htmlsondern nur die index.htmlim distOrdner benötigt wird . Außerdem vor dem Ausführen npm run buildSie Ihre Produktionsweg in konfigurieren sollte config/index.js“.
David 天宇 Wong
24

Wenn Sie Ihr Projekt erstellt haben mit:

vue init webpack myproject

Sie müssen Ihre Einstellung NODE_ENVauf Produktion und Ausführung einstellen , da für das Projekt das Web Pack sowohl für die Entwicklung als auch für die Produktion konfiguriert ist:

NODE_ENV=production npm run build

Kopieren Sie das dist/Verzeichnis in das Stammverzeichnis Ihrer Website.

Wenn Sie mit Docker bereitstellen, benötigen Sie einen Express-Server, der das dist/Verzeichnis bedient.

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" ]
akinjide
quelle
Setzen Sie diesen Container nach außen aus oder verwenden Sie Nginx oder Apache als Proxy?
Hakim
Ja, Sie würden Apache oder Nginx als Proxy verwenden, Port 80
akinjide
paste.ubuntu.com/p/dryhSwnYh5 WORKDIR / usr / src / app kann WORKDIR / app sein? auch CMD ["http-server", "dist"] für die Bereitstellung über http-Server benötigt? anstelle von CMD ["npm", "start"]
LOG_TAG
Version: webpack 3.12.0 Zeit: 16548 ms Asset-Größe Chunks Chunk-Namen build.js 2.15 MB 0 [emittiert] [groß] main build.js.map 9.74 MB 0 [emittiert] main - Dies wird angezeigt, nachdem das obige cmd in project ausgeführt wurde Ordner - können Sie mich bitte durch den nächsten Schritt führen, um ins Leben zu kommen? -
Hamendra Sunthwal
7

in Ihrem Terminal

npm run build

und Sie hosten den dist-Ordner. Weitere Informationen finden Sie in diesem Video

anasmorahhib
quelle
Dies setzt fälschlicherweise voraus, dass in package.json ein Build-Skript vorhanden ist.
Absturz Springfield
4
@crashspringfield Eine genaue Annahme zu treffen, wenn das OP speziell nach einer Vue-Anwendung fragt, die mitvue-cli
Dan Fletcher
4

Wenn Sie Probleme mit Ihrem Pfad haben, müssen Sie möglicherweise die assetPublicPathin Ihrer config/index.jsDatei in Ihr Unterverzeichnis ändern :

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

jntme
quelle
Stellen Sie sicher, dass Sie Build ändern: {..... AssetsPublicPath: './', die Punkte vor dem Schrägstrich sind wichtig. Es gibt jedoch auch einen AssetsPublinPath im dev-Objekt in dieser Datei. Ändern Sie daher unbedingt den richtigen.
Shane G
Version: webpack 3.12.0 Zeit: 16548 ms Asset-Größe Chunks Chunk-Namen build.js 2.15 MB 0 [emittiert] [groß] main build.js.map 9.74 MB 0 [emittiert] main - Dies wird angezeigt, nachdem das obige cmd in project ausgeführt wurde Ordner - können Sie mich bitte durch den nächsten Schritt führen, um ins Leben zu kommen? -
Hamendra Sunthwal
2

Die Befehle für die auszuführenden spezifischen Codes sind in Ihrer Datei package.json unter Skripten aufgeführt. Hier ist ein Beispiel von mir:

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

Wenn Sie Ihre Site lokal ausführen möchten, können Sie sie mit testen

npm serve

Wenn Sie Ihre Site für die Produktion vorbereiten möchten, würden Sie verwenden

npm build

Dieser Befehl generiert einen dist-Ordner mit einer komprimierten Version Ihrer Site.

Gene Yllanes
quelle
1

Um Ihre Anwendung in der Produktumgebung bereitzustellen, fügen Sie hinzu

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

in Ihren Skripten in der Datei package.json.

Öffnen Sie Ihre main.js und fügen Sie hinzu

Vue.config.productionTip = false;

direkt nach Ihren Importen. Öffnen Sie dann Ihre CLI im Projektordner und führen Sie diesen Befehl aus

npm run build

Dadurch wird ein dist-Ordner in Ihrem Projektverzeichnis erstellt. Sie können diesen dist-Ordner auf Ihren Host hochladen und Ihre Website wird live sein

MaBbKhawaja
quelle
0

Dieser Befehl dient zum Starten des Entwicklungsservers:

npm run dev

Wo dieser Befehl für den Produktionsbuild ist:

npm run build

Stellen Sie sicher, dass Sie in den generierten Ordner "dist" schauen und ihn durchsuchen.
Starten Sie dann alle diese Dateien auf Ihren Server.

Farcrew Rz
quelle
0

Eine Möglichkeit, dies ohne Verwendung von VUE-CLI zu tun, besteht darin, alle Skriptdateien in einer fetten js-Datei zu bündeln und diese große fette Javascript-Datei dann in die Hauptvorlagendatei zu verweisen.

Ich bevorzuge es, webpack als Bundler zu verwenden und eine webpack.conig.js im Stammverzeichnis des Projekts zu erstellen. Alle Konfigurationen wie Einstiegspunkt, Ausgabedatei, Lader usw. werden in dieser Konfigurationsdatei gespeichert. Danach füge ich ein Skript in die Datei package.json ein, das die Datei webpack.config.js für Webpack-Konfigurationen verwendet, und beginne, Dateien zu überwachen und eine gebündelte Js-Datei an dem in der Datei webpack.config.js angegebenen Speicherort zu erstellen.

Yash_6795
quelle
0

Ich denke, Sie können vue-cli verwenden

Wenn Sie Vue CLI zusammen mit einem Backend-Framework verwenden, das statische Assets im Rahmen seiner Bereitstellung verarbeitet, müssen Sie lediglich sicherstellen, dass Vue CLI die erstellten Dateien am richtigen Speicherort generiert, und anschließend die Bereitstellungsanweisungen Ihres Backend-Frameworks befolgen .

Wenn Sie Ihre Frontend-App getrennt von Ihrem Backend entwickeln - dh Ihr Backend stellt eine API zur Verfügung, mit der Ihr Frontend kommunizieren kann -, ist Ihr Frontend im Wesentlichen eine rein statische App. Sie können den erstellten Inhalt im dist-Verzeichnis auf jedem statischen Dateiserver bereitstellen, stellen Sie jedoch sicher, dass Sie die richtige baseUrl festlegen

Loveun CG
quelle
Sie haben Recht, aber wie die akzeptierte Antwort zeigt, war die Frage, nach welchem ​​Befehl ausgeführt werden soll
JR Utily
0
  1. npm run build - dies wird die Codes hässlich machen und minimieren

  2. Speichern Sie die Datei index.html und dist im Stammverzeichnis Ihrer Website.

  3. kostenloser Hosting-Service, an dem Sie interessiert sein könnten - Firebase-Hosting.


quelle
0

Wenn Sie bei der Erstellung Ihres Projekts vue-cli und webpack verwendet haben.

Sie können nur verwenden

npm Führen Sie den Befehl build in der Befehlszeile aus, und der Ordner dist wird in Ihrem Projekt erstellt. Laden Sie einfach den Inhalt dieses Ordners auf Ihr FTP hoch und fertig.

user3348410
quelle
Laden Sie einfach den dist-Ordner auf Ihr FTP hoch und fertig? & wie greife ich dann auf die Vue App auf dem Server zu?
Hamendra Sunthwal
0

Dies ist für den Einsatz bei einem benutzerdefinierten Ordner (wenn Sie , dass Ihre App nicht im Stammverzeichnis, z. B. URL / myApp /) - Ich habe lange gesucht, um diese Antwort zu finden ... hoffe, es hilft jemandem.

Holen Sie sich die VUE CLI unter https://cli.vuejs.org/guide/ und verwenden Sie den UI-Build, um dies zu vereinfachen. Dann können Sie in der Konfiguration den öffentlichen Pfad zu / Whatever / ändern und auf die URL / Whatever verlinken.

Schauen Sie sich dieses Video an, in dem erklärt wird, wie Sie eine Vue-App mithilfe der CLI erstellen, wenn Sie weitere Hilfe benötigen: https://www.youtube.com/watch?v=Wy9q22isx3U

Rick K.
quelle
0

Die vue-Dokumentation enthält zahlreiche Informationen dazu, wie Sie sie auf verschiedenen Host-Anbietern bereitstellen können.

npm run build

Sie finden dies in der Paket-JSON-Datei. Abschnitt Skripte. Es bietet Skripte zum Testen und Entwickeln sowie zum Erstellen für die Produktion.

Sie können Dienste wie netlify verwenden, die Ihr Projekt bündeln, indem Sie Ihr Github-Repo des Projekts von seiner Site aus verknüpfen. Es enthält auch Informationen zur Bereitstellung auf anderen Websites, z. B. Heroku.

Weitere Details dazu finden Sie hier

Brian Mwangi
quelle
0

Installieren Sie zuerst Vue Cli global

npm install -g @vue/cli

Führen Sie Folgendes aus, um ein neues Projekt zu erstellen:

vue create project-name

vue ausführen

npm run serve 

Vue CLI> = 3 verwendet dieselbe Vue-Binärdatei und überschreibt daher Vue CLI 2 (vue-cli). Wenn Sie weiterhin die Legacy-Vue-Init-Funktionalität benötigen, können Sie eine globale Bridge installieren:

Vue Init global

npm install -g @vue/cli-init

vue init funktioniert jetzt genauso wie [email protected]

Vue App erstellen

vue init webpack my-project

Führen Sie den Entwicklerserver aus

npm run dev
MD JAMIL AJ
quelle
-1

Wenn Sie erstellen und an Ihren Remote-Server senden möchten, können Sie den Cli-Service ( https://cli.vuejs.org/guide/cli-service.html ) verwenden. Sie können Aufgaben erstellen, die bereitgestellt , erstellt und mit einigen bereitgestellt werden sollen spezifische Plugins alsvue-cli-plugin-s3-deploy

Gilson Doi Junior
quelle