Apa yang harus saya lakukan setelah mengembangkan aplikasi Vuevue-cli ?

Di Angular ada beberapa perintah yang menggabungkan semua skrip menjadi satu skrip tunggal, dan kemudian file-file ini dikirim ke host.

Apakah ada yang sama di Vue ?

Saya pikir Anda telah membuat proyek Anda seperti ini:

vue init webpack myproject

Nah, sekarang kamu bisa lari

npm run build

Salin folder index.html dan / dist / ke direktori root situs web Anda. Selesai.

Jika Anda telah membuat proyek Anda menggunakan:

vue init webpack myproject

Anda perlu menyetel NODE_ENVke produksi dan menjalankan, karena proyek memiliki paket web yang dikonfigurasi untuk pengembangan dan produksi:

NODE_ENV=production npm run build

Salin dist/direktori ke direktori root situs web Anda.

Jika Anda menerapkan dengan Docker, Anda memerlukan server ekspres, yang melayani dist/direktori.

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

di terminal Anda

npm run build

dan Anda meng-host folder dist. untuk lebih lanjut lihat video ini

Jika Anda mengalami masalah dengan jalur Anda, mungkin Anda perlu mengubah assetPublicPathdi config/index.jsfile Anda ke sub-direktori Anda:

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

Perintah untuk menjalankan kode spesifik apa yang tercantum di dalam file package.json Anda di bawah skrip. Ini adalah contoh saya:

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

Jika Anda ingin menjalankan situs Anda secara lokal, Anda dapat mengujinya dengan

npm serve

Jika Anda ingin mempersiapkan situs Anda untuk produksi, Anda akan menggunakan

npm build

Perintah ini akan menghasilkan folder dist yang memiliki versi terkompresi dari situs Anda.

Untuk menerapkan aplikasi Anda ke lingkungan produksi, tambahkan

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

dalam skrip Anda di file package.json.

Buka main.js Anda dan tambahkan

Vue.config.productionTip = false;

tepat setelah impor Anda. Kemudian buka cli Anda di folder proyek dan jalankan perintah ini

npm run build

Ini akan membuat folder dist di direktori proyek Anda, Anda dapat mengunggah folder dist itu di host Anda dan situs web Anda akan ditayangkan

Dokumentasi vue memberikan banyak informasi tentang ini tentang bagaimana Anda dapat menerapkan ke penyedia host yang berbeda.

npm run build

Anda dapat menemukannya dari file json paket. bagian skrip. Ini menyediakan skrip untuk pengujian dan pengembangan dan membangun untuk produksi.

Anda dapat menggunakan layanan seperti netlify yang akan menggabungkan proyek Anda dengan menghubungkan repo github Anda dari proyek tersebut dari situs mereka. Ini juga memberikan informasi tentang cara menyebarkan di situs lain seperti heroku.

Anda dapat menemukan detail lebih lanjut tentang ini di sini

Perintah ini untuk memulai server pengembangan:

npm run dev

Di mana perintah ini untuk build produksi:

npm run build

Pastikan untuk melihat dan masuk ke dalam folder yang dibuat bernama 'dist'.
Kemudian mulai dorong semua file tersebut ke server Anda.

Salah satu cara untuk melakukan ini tanpa menggunakan VUE-CLI adalah menggabungkan semua file skrip ke dalam satu file js yang besar dan kemudian mereferensikan file javascript yang besar itu ke file template utama.

Saya lebih suka menggunakan webpack sebagai bundler dan membuat webpack.conig.js di direktori root proyek. Semua konfigurasi seperti titik masuk, file keluaran, pemuat, dll .. semuanya disimpan dalam file konfigurasi itu. Setelah itu, saya menambahkan script di file package.json yang menggunakan file webpack.config.js untuk konfigurasi webpack dan mulai melihat file dan membuat file bundel Js ke lokasi yang disebutkan di file webpack.config.js.

Saya pikir Anda bisa menggunakan vue-cli

Jika Anda menggunakan Vue CLI bersama dengan kerangka kerja backend yang menangani aset statis sebagai bagian dari penerapannya, yang perlu Anda lakukan hanyalah memastikan Vue CLI menghasilkan file yang dibangun di lokasi yang benar, lalu ikuti instruksi penerapan kerangka kerja backend Anda .

Jika Anda mengembangkan aplikasi frontend secara terpisah dari backend - yaitu backend Anda mengekspos API untuk digunakan di frontend, maka frontend Anda pada dasarnya adalah aplikasi yang murni statis. Anda dapat menerapkan konten yang dibuat di direktori dist ke server file statis mana pun, tetapi pastikan untuk menyetel baseUrl yang benar

1. npm run build - ini akan memperjelas dan mengecilkan kode

2. simpan folder index.html dan dist di direktori root situs web Anda.

3. layanan hosting gratis yang mungkin Anda minati - Firebase hosting.

jika Anda menggunakan vue-cli dan webpack saat membuat proyek.

Anda bisa menggunakan saja

npm jalankan perintah build di baris perintah, dan itu akan membuat folder dist di proyek Anda. Cukup unggah konten folder ini ke ftp Anda dan selesai.

INI UNTUK DEPLOYING KE FOLDER KUSTOM (jika Anda ingin aplikasi Anda tidak di root, misalnya URL / myApp /) - Saya sudah lama mencari jawaban ini ... semoga bisa membantu seseorang.

Dapatkan VUE CLI di https://cli.vuejs.org/guide/ dan gunakan UI build untuk membuatnya mudah. Kemudian dalam konfigurasi Anda dapat mengubah jalur publik ke / apa saja / dan menautkannya ke URL / apa pun.

Lihat video ini yang menjelaskan cara membuat aplikasi vue menggunakan CLI jika Anda memerlukan bantuan lebih lanjut: https://www.youtube.com/watch?v=Wy9q22isx3U

Pertama Instal Vue Cli Secara Global

npm install -g @vue/cli

Untuk membuat proyek baru, jalankan:

vue create project-name

run vue

npm run serve 

Vue CLI> = 3 menggunakan biner vue yang sama, sehingga menimpa Vue CLI 2 (vue-cli). Jika Anda masih membutuhkan fungsionalitas vue init lama, Anda dapat menginstal global bridge:

Vue Init Secara Global

npm install -g @vue/cli-init

vue init sekarang bekerja persis sama dengan [email protected]

Vue Create App

vue init webpack my-project

Jalankan server pengembang

npm run dev

Jika Anda ingin membangun dan mengirim ke server jarak jauh Anda, Anda dapat menggunakan cli-service ( https://cli.vuejs.org/guide/cli-service.html ) Anda dapat membuat tugas untuk dilayani, dibangun dan satu untuk diterapkan dengan beberapa plugin tertentu sebagaivue-cli-plugin-s3-deploy