wake-up-neo.com

So stellen Sie die Vue-App bereit

Was mache ich nach der Entwicklung einer Vue App mit vue-cli

In Angular gab es einen Befehl, der alle Skripts in einem einzigen Skript bündelte, und diese Dateien dann an den Host gesendet.

Gibt es etwas in Vue

71
artem0071

Ich denke, du hast dein Projekt so erstellt: 

vue init webpack myproject

Nun, jetzt kannst du laufen

npm run build

Kopieren Sie die Dateien index.html und/dist/in das Stammverzeichnis Ihrer Website. Erledigt.

105
Egor Stambakio

Wenn Sie Ihr Projekt mit folgendem erstellt haben:

vue init webpack myproject

Sie müssten Ihren NODE_ENV auf Produktion setzen und ausführen, da das Projekt ein Web Pack für Entwicklung und Produktion konfiguriert hat:

NODE_ENV=production npm run build

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

Bei der Bereitstellung mit Docker benötigen Sie einen Express-Server, der das Verzeichnis dist/ bereitstellt.

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

in Ihrem Terminal

npm run build

und Sie hosten den Ordner dist. für mehr siehe dieses video

3
anasmorahhib

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

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

3
jntme

wenn Sie beim Erstellen Ihres Projekts vue-cli und webpack verwendet haben. 

sie können nur verwenden 

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

1
user3348410

Die Befehle für die auszuführenden Codes sind in Ihrer package.json-Datei unter Skripts 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, verwenden Sie

npm build

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

1
Gene Yllanes

DIESES IS ZUM EINSETZEN IN EINEN BENUTZERDEFINIERTEN ORDNER (wenn Sie möchten, dass sich Ihre App nicht im Stammverzeichnis befindet, z. B. URL/myApp /) - I suchte eine langjährige 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. Anschließend können Sie in der Konfiguration den öffentlichen Pfad zu/whatever/ändern und eine Verknüpfung zu der URL/whatever herstellen.

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

0
Rick K.

Eine Möglichkeit, dies ohne VUE-CLI zu tun, besteht darin, alle Skriptdateien in einer Fat-JS-Datei zu bündeln und dann auf diese große, fette Javascript-Datei in der Hauptvorlagendatei zu verweisen.

Ich benutze webpack lieber als Bundler und erstelle im Hauptverzeichnis des Projekts eine webpack.conig.js. Alle Konfigurationen wie Einstiegspunkt, Ausgabedatei, Lader usw. werden in dieser Konfigurationsdatei gespeichert. Danach füge ich in der package.json-Datei ein Skript hinzu, das die webpack.config.js-Datei für die Webpack-Konfigurationen verwendet. Beginnen Sie mit der Überwachung der Dateien und erstellen Sie eine Js-Paketdatei an der angegebenen Stelle in der Datei webpack.config.js.

0
Yash_6795
  1. npm run build - das macht die Codes unschädlich und reduziert

  2. speichern Sie die Dateien index.html und dist im Stammverzeichnis Ihrer Website.

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

0
user10543871

Dieser Befehl dient zum Starten des Entwicklungsservers:

npm run dev

Wo dieser Befehl für den Produktionsaufbau gilt:

npm run build

Schauen Sie sich den generierten Ordner mit dem Namen 'dist' an.
.__ Starten Sie anschließend Alle diese Dateien auf Ihren Server.

0
Farcrew Rz

Ich denke, du kannst vue-cli verwenden

Wenn Sie Vue CLI zusammen mit einem Backend-Framework verwenden, das statische Assets als Teil der Bereitstellung behandelt, müssen Sie nur sicherstellen, dass Vue CLI die erstellten Dateien am richtigen Ort generiert, und dann die Anweisungen zur Bereitstellung Ihres Backend-Frameworks befolgen .

Wenn Sie Ihre Frontend-App separat von Ihrem Backend entwickeln - d. H. Ihr Backend stellt eine API für Ihr Frontend bereit, mit der Sie sprechen können, ist Ihr Frontend im Wesentlichen eine rein statische App. Sie können den erstellten Inhalt im dist-Verzeichnis auf einem beliebigen statischen Dateiserver bereitstellen. Stellen Sie jedoch sicher, dass Sie die richtige baseUrl festlegen

0
Loveun CG

Wenn Sie Aufgaben erstellen und an Ihren Remote-Server senden möchten, können Sie mit cli-service ( https://cli.vuejs.org/guide/cli-service.html ) Aufgaben erstellen, die Sie bedienen möchten. build und eins für die Bereitstellung mit bestimmten Plugins wie vue-cli-plugin-s3-deploy

0