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 ?

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.

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

in Ihrem Terminal

npm run build

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

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

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.

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

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.

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.

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

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.

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.

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

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

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

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