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 ?

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.

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

w terminalu

npm run build

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

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

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.

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

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.

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.

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

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.

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.

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

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

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 [email protected]

Vue Create App

vue init webpack my-project

Uruchom serwer programisty

npm run dev

Jeśli chcesz budować i wysyłać na swój zdalny serwer, możesz użyć usługi cli ( https://cli.vuejs.org/guide/cli-service.html ), możesz tworzyć zadania do obsługi, budowania i wdrażania z niektórymi określone wtyczki jakovue-cli-plugin-s3-deploy