Jak wdrożyć aplikację Vue?


131

Co powinienem zrobić po opracowaniu aplikacji Vuevue-cli ?

W Angularze było polecenie, które łączyło wszystkie skrypty w jeden skrypt, a następnie te pliki są wysyłane do hosta.

Czy jest coś takiego w Vue ?


Powinien być częścią CLI, oto strona z dokumentacją wdrażania vuejs.org/v2/guide/deployment.html W zależności od posiadanej wersji i używanego szablonu, prawdopodobnie będzie się trochę różnić. Ale powinieneś określić, że robisz kompilację produkcyjną, jak w dokumentacji.
Swimburger

2
Używam 2.2.1 vue. Widzę dokumentację, ale nie ma informacji o wdrożeniu. Nie używam nodejs na hosterze. Więc kiedy uruchamiam go w localhost, działa, ale kiedy
pobieram

8
Kiedy tworzysz kompilację, prawdopodobnie skompilujesz wszystkie pliki (html, css, js) do folderu / dist. Ten folder dist powinien być katalogiem głównym Twojej aplikacji na Twoim hostingu. (Nie korzystałem jeszcze z Vue2, ale założę się, że tam będzie)
Swimburger

Hej ludzie, miałem ten sam problem w zeszłym tygodniu i napisałem coś, jeśli to komuś pomoże: medium.com/@seenickcode/ ...
seenickcode

Wgrałem pliki z folderu dist do cpanel, ale wyświetla się tylko pusty
Fayaz

Odpowiedzi:


171

Myślę, że stworzyłeś swój projekt w ten sposób:

vue init webpack myproject

Cóż, teraz możesz biec

npm run build

Skopiuj index.html i / dist / folder do katalogu głównego swojej witryny. Gotowe.


1
Czy nie ma potrzeby biegania npm startani czegoś takiego?
nu everest

@nueverest, jeśli właśnie utworzyłeś swój projekt za pomocą vue init webpack myproject, zobaczysz dalsze instrukcje w konsoli: cd myproject, npm install. Po npm installpobraniu wszystkich pakietów, vue jest w stanie skompilować się z npm run devserwerem deweloperskim i ponownym ładowaniem na gorąco lub w npm run buildcelu stworzenia paczki do wdrożenia.
Egor Stambakio

To nie działa z routerem vue ... Czy robię coś nie tak?
Andy Hayden,

1
@AndyHayden an AWS S3 sprawdź, czy 1) indeks i dokument błędu === index.html; 2) zasady są ustawione dla statycznej strony internetowej ; 3) build.jsznajdujesz się w distfolderze na s3 i index.htmlznajduje się w katalogu głównym.
Egor Stambakio,

9
odpowiedź powinna brzmieć "zawartość distfolderu jest wszystkim, czego potrzebujesz. Nie musisz kopiować, /index.htmlwystarczy tylko folder znajdujący się index.htmlw distfolderze. Ponadto przed uruchomieniem npm run buildnależy skonfigurować ścieżkę produkcyjną w config/index.js".
David 天宇 Wong

24

Jeśli stworzyłeś swój projekt używając:

vue init webpack myproject

Musisz ustawić NODE_ENVprodukcję i uruchomić, ponieważ projekt ma pakiet sieciowy skonfigurowany zarówno pod kątem programowania, jak i produkcji:

NODE_ENV=production npm run build

Skopiuj dist/katalog do katalogu głównego swojej witryny.

Jeśli wdrażasz za pomocą Dockera, potrzebujesz ekspresowego serwera obsługującego dist/katalog.

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

czy wystawiasz ten kontener na zewnątrz, czy używasz Nginx lub Apache jako proxy?
Hakim,


paste.ubuntu.com/p/dryhSwnYh5 WORKDIR / usr / src / app może być WORKDIR / app? także CMD ["serwer http", "dist"] potrzebny do obsługi przez serwer http? zamiast CMD ["npm", "start"]
LOG_TAG

Wersja: webpack 3.12.0 Czas: 16548 ms Rozmiar zasobu Fragmenty Nazwy fragmentów build.js 2,15 MB 0 [wyemitowane] [duże] main build.js.map 9,74 MB 0 [wyemitowane] main - pojawia się po uruchomieniu powyższego polecenia cmd w projekcie folder - czy możesz przeprowadzić mnie przez następny krok, aby zacząć żyć? -
Hamendra Sunthwal

7

w terminalu

npm run build

i hostujesz folder dist. po więcej zobacz ten film


To niepoprawnie zakłada, że ​​skrypt kompilacji istnieje w pliku package.json.
crash Springfield

4
@crashspringfield Dokładne założenie, które należy zrobić, gdy OP pyta konkretnie o aplikację Vue utworzoną za pomocąvue-cli
Dan Fletcher

4

Jeśli napotkasz problemy z twojej drodze, być może trzeba zmienić assetPublicPathw config/index.jspliku na podkatalogu:

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


Upewnij się, że zmienisz build: {..... assetPublicPath: „./”, kropka przed ukośnikiem jest ważna. Ale w obiekcie dev w tym pliku znajduje się również assetPublinPath, więc pamiętaj, aby zmienić właściwy.
Shane G,

Wersja: webpack 3.12.0 Czas: 16548 ms Rozmiar zasobu Fragmenty Nazwy fragmentów build.js 2,15 MB 0 [wyemitowane] [duże] main build.js.map 9,74 MB 0 [wyemitowane] main - pojawia się po uruchomieniu powyższego polecenia cmd w projekcie folder - czy możesz przeprowadzić mnie przez następny krok, aby zacząć żyć? -
Hamendra Sunthwal

2

Polecenia określające konkretne kody do uruchomienia są wymienione w pliku package.json w sekcji script. Oto mój przykład:

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

Jeśli chcesz uruchomić swoją witrynę lokalnie, możesz ją przetestować za pomocą

npm serve

Jeśli chcesz przygotować witrynę do produkcji, użyj

npm build

To polecenie wygeneruje folder dist, który zawiera skompresowaną wersję Twojej witryny.


1

Aby wdrożyć aplikację w środowisku produkcyjnym, dodaj

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

w swoich skryptach w pliku package.json.

Otwórz plik main.js i dodaj

Vue.config.productionTip = false;

zaraz po imporcie. Następnie otwórz Cli w folderze projektu i uruchom to polecenie

npm run build

Spowoduje to utworzenie folderu dist w katalogu projektu, możesz przesłać ten folder dist na hoście, a witryna internetowa będzie aktywna


0

To polecenie służy do uruchamiania serwera deweloperskiego:

npm run dev

Gdzie to polecenie dotyczy kompilacji produkcyjnej:

npm run build

Sprawdź i wejdź do wygenerowanego folderu o nazwie „dist”.
Następnie zacznij wypychać wszystkie te pliki na swój serwer.


0

Jednym ze sposobów na zrobienie tego bez użycia VUE-CLI jest spakowanie wszystkich plików skryptów w jeden gruby plik js, a następnie odniesienie tego dużego grubego pliku javascript do głównego pliku szablonu.

Wolę używać webpacka jako pakietu i tworzyć webpack.conig.js w katalogu głównym projektu. Wszystkie konfiguracje, takie jak punkt wejścia, plik wyjściowy, programy ładujące itp., Są przechowywane w tym pliku konfiguracyjnym. Następnie dodaję skrypt w pliku package.json, który używa pliku webpack.config.js do konfiguracji pakietu webpack i zacznę oglądać pliki i tworzę plik w pakiecie Js we wspomnianej lokalizacji w pliku webpack.config.js.


0

Myślę, że możesz użyć vue-cli

Jeśli używasz Vue CLI wraz z platformą zaplecza, która obsługuje statyczne zasoby w ramach swojego wdrożenia, wszystko, co musisz zrobić, to upewnić się, że Vue CLI generuje skompilowane pliki we właściwej lokalizacji, a następnie postępuj zgodnie z instrukcją wdrażania struktury wewnętrznej bazy danych .

Jeśli tworzysz swoją aplikację frontendową niezależnie od zaplecza - tj. Twój backend udostępnia API, z którym może komunikować się twój frontend, wtedy twój frontend jest w zasadzie czysto statyczną aplikacją. Możesz wdrożyć zbudowaną zawartość w katalogu dist na dowolnym serwerze plików statycznych, ale upewnij się, że ustawiłeś poprawny baseUrl


masz rację, ale jak pokazuje zaakceptowana odpowiedź, pytanie dotyczyło tego, które polecenie wykonać
JR Utily

0
  1. npm run build - spowoduje to zniekształcenie i zminimalizowanie kodów

  2. zapisz folder index.html i dist w katalogu głównym swojej witryny.

  3. bezpłatna usługa hostingowa, która może Cię zainteresować - hosting Firebase.


0

jeśli podczas tworzenia projektu korzystałeś z vue-cli i webpack.

możesz użyć tylko

npm uruchom polecenie build w linii poleceń i utworzy folder dist w twoim projekcie. Po prostu prześlij zawartość tego folderu na swój ftp i gotowe.


po prostu prześlij folder dist na swój ftp i gotowe? i jak uzyskać dostęp do aplikacji Vue na serwerze?
Hamendra Sunthwal

0

JEST TO DO WDROŻENIA W NIESTANDARDOWYM FOLDERZE (jeśli chcesz, aby Twoja aplikacja nie była w katalogu głównym, np. URL / myApp /) - długo szukałem tej odpowiedzi ... mam nadzieję, że komuś pomoże.

Pobierz VUE CLI na https://cli.vuejs.org/guide/ i użyj kompilacji interfejsu użytkownika, aby to ułatwić. Następnie w konfiguracji możesz zmienić publiczną ścieżkę na / cokolwiek / i link do niej URL / cokolwiek.

Obejrzyj ten film, który wyjaśnia, jak utworzyć aplikację vue za pomocą CLI, jeśli potrzebujesz dodatkowej pomocy: https://www.youtube.com/watch?v=Wy9q22isx3U


0

Dokumentacja vue zawiera wiele informacji na ten temat, jak można wdrożyć u różnych dostawców hostów.

npm run build

Możesz to znaleźć w pliku json pakietu. sekcja skryptów. Udostępnia skrypty do testowania, programowania i budowania na potrzeby produkcji.

Możesz korzystać z usług takich jak netlify, które połączą Twój projekt, łącząc repozytorium projektu na githubie z ich witryny. Zawiera również informacje na temat sposobu wdrażania w innych witrynach, takich jak heroku.

Więcej informacji na ten temat można znaleźć tutaj


0

Najpierw zainstaluj Vue Cli globalnie

npm install -g @vue/cli

Aby stworzyć nowy projekt, uruchom:

vue create project-name

run vue

npm run serve 

Vue CLI> = 3 używa tego samego pliku binarnego vue, więc nadpisuje Vue CLI 2 (vue-cli). Jeśli nadal potrzebujesz starszej funkcjonalności init vue, możesz zainstalować globalny most:

Vue Init Globalnie

npm install -g @vue/cli-init

vue init działa teraz dokładnie tak samo jak vue-cli@2.x

Vue Create App

vue init webpack my-project

Uruchom serwer programisty

npm run dev

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.