İle bir Vue uygulaması geliştirdikten sonra ne yapmalıyım vue-cli?

Gelen açısal tek komut dosyası içine tüm komut dosyalarını paketlemek bazı komut vardı ve sonra bu dosyalar ana bilgisayara gönderilir.

Vue'da aynı olan bir şey var mı ?

Sanırım projenizi şöyle oluşturdunuz:

vue init webpack myproject

Pekala, şimdi koşabilirsin

npm run build

İndex.html ve / dist / klasörünü web sitenizin kök dizinine kopyalayın. Bitti.

Projenizi kullanarak oluşturduysanız:

vue init webpack myproject

NODE_ENVProjenizi hem geliştirme hem de üretim için yapılandırılmış web paketi olduğundan, üretim ve çalıştırmaya ayarlamanız gerekir :

NODE_ENV=production npm run build

dist/Dizini web sitenizin kök dizinine kopyalayın .

Docker ile dağıtım yapıyorsanız, dist/dizine hizmet veren bir ekspres sunucuya ihtiyacınız olacaktır .

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

senin terminalinde

npm run build

ve dist klasörünü barındırırsınız. daha fazlası için bu videoyu izleyin

Eğer yolu ile sorun yaşarsanız, belki değiştirmeniz gerekir assetPublicPathsenin içinde config/index.jssenin alt dizine dosyanın:

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

Hangi özel kodların çalıştırılacağına ilişkin komutlar, package.json dosyanızın içinde komut dosyaları altında listelenir. İşte benim bir örnek:

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

Sitenizi yerel olarak çalıştırmak istiyorsanız, şununla test edebilirsiniz:

npm serve

Sitenizi üretime hazırlamak istiyorsanız,

npm build

Bu komut, sitenizin sıkıştırılmış bir sürümüne sahip bir dist klasörü oluşturacaktır.

Uygulamanızı üretim ortamına dağıtmak için

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

package.json dosyasındaki komut dosyalarınızda.

Main.js dosyanızı açın ve

Vue.config.productionTip = false;

ithalatınızdan hemen sonra. Ardından proje klasöründeki cli'nizi açın ve bu komutu çalıştırın

npm run build

Bu, proje dizininizde bir dist klasörü oluşturacaktır, bu dist klasörünü ana makinenize yükleyebilirsiniz ve web siteniz yayında olacaktır.

Vue belgeleri, farklı ana bilgisayar sağlayıcılarına nasıl dağıtabileceğiniz konusunda bu konuda birçok bilgi sağlar.

npm run build

Bunu json paket dosyasında bulabilirsiniz. komut dosyaları bölümü. Test ve geliştirme ve üretim için oluşturma için komut dosyaları sağlar.

Projenizin github repo'sunu kendi sitelerinden bağlayarak projenizi paketleyecek olan netlify gibi hizmetleri kullanabilirsiniz. Ayrıca, heroku gibi diğer sitelere nasıl dağıtılacağı hakkında bilgi sağlar.

Bununla ilgili daha fazla ayrıntıyı burada bulabilirsiniz

Bu komut geliştirme sunucusunu başlatmak içindir:

npm run dev

Bu komutun üretim yapısı için olduğu yer:

npm run build

Oluşturulan 'dist' adlı klasöre baktığınızdan ve içine girdiğinizden emin olun.
Ardından tüm bu dosyaları sunucunuza göndermeye başlayın.

Bunu VUE-CLI kullanmadan yapmanın bir yolu, tüm komut dosyalarını tek bir büyük js dosyasında toplamak ve ardından bu büyük javascript dosyasını ana şablon dosyasına referans vermektir.

Webpack'i paketleyici olarak kullanmayı ve projenin kök dizininde bir webpack.conig.js oluşturmayı tercih ediyorum. Giriş noktası, çıktı dosyası, yükleyiciler, vb. Gibi tüm yapılandırmaların tümü bu yapılandırma dosyasında saklanır. Bundan sonra, package.json dosyasına, webpack yapılandırmaları için webpack.config.js dosyasını kullanan bir komut dosyası ekliyorum ve dosyaları izlemeye başlıyorum ve webpack.config.js dosyasında belirtilen konuma Js paketlenmiş bir dosya oluşturuyorum.

Bence vue-cli kullanabilirsin

Vue CLI'yi, dağıtımının bir parçası olarak statik varlıkları işleyen bir arka uç çerçevesiyle birlikte kullanıyorsanız, yapmanız gereken tek şey, Vue CLI'nin yerleşik dosyaları doğru konumda oluşturduğundan emin olmak ve ardından arka uç çerçevenizin dağıtım talimatını takip etmektir. .

Ön uç uygulamanızı arka ucunuzdan ayrı olarak geliştiriyorsanız - yani arka ucunuz, ön ucunuzun konuşması için bir API ortaya çıkarırsa, o zaman ön ucunuz tamamen statik bir uygulamadır. Dist dizinindeki yerleşik içeriği herhangi bir statik dosya sunucusuna dağıtabilirsiniz, ancak doğru baseUrl'yi ayarladığınızdan emin olun.

1. npm run build - bu, kodları çirkinleştirecek ve küçültecektir

2. index.html ve dist klasörünü web sitenizin kök dizinine kaydedin.

3. ilginizi çekebilecek ücretsiz barındırma hizmeti - Firebase barındırma.

Projenizi oluştururken vue-cli ve webpack kullandıysanız.

sadece kullanabilirsin

npm komut satırında build komutunu çalıştırın ve projenizde dist klasörü oluşturacaktır. Sadece bu klasörün içeriğini ftp'nize yükleyin ve bitirin.

BU BİR ÖZEL KLASÖRE YERLEŞTİRMEK İÇİNDİR (uygulamanızın kök dizininde olmamasını istiyorsanız, örneğin URL / uygulamam /) - Bu yanıtı bulmak için uzun bir süre aradım ... umarım birine yardımcı olur.

VUE CLI'yi https://cli.vuejs.org/guide/ adresinden edinin ve bunu kolaylaştırmak için UI yapısını kullanın. Daha sonra konfigürasyonda genel yolu / ne olursa olsun / olarak değiştirebilir ve URL'ye / ne olursa olsun ona bağlayabilirsiniz.

Daha fazla yardıma ihtiyacınız olursa CLI kullanarak bir vue uygulamasının nasıl oluşturulacağını açıklayan bu videoyu izleyin: https://www.youtube.com/watch?v=Wy9q22isx3U

İlk olarak Vue Cli'i Global Olarak Yükleyin

npm install -g @vue/cli

Yeni bir proje oluşturmak için şunu çalıştırın:

vue create project-name

run vue

npm run serve 

Vue CLI> = 3 aynı vue ikilisini kullanır, bu yüzden Vue CLI 2'nin (vue-cli) üzerine yazar. Halen eski vue init işlevine ihtiyacınız varsa, global bir köprü kurabilirsiniz:

Küresel Olarak Vue Init

npm install -g @vue/cli-init

vue init artık vue-cli@2.x ile tamamen aynı şekilde çalışıyor

Vue Uygulama Oluştur

vue init webpack my-project

Geliştirici sunucusunu çalıştırın

npm run dev

Uzaktaki sunucunuzu oluşturmak ve göndermek istiyorsanız, cli-servisini ( https://cli.vuejs.org/guide/cli-service.html ) kullanabilirsiniz. gibi belirli eklentilervue-cli-plugin-s3-deploy