Bagaimana cara menerapkan aplikasi Vue?

132

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 ?

vue.js  vuejs2  vue-cli 
— artem0071
sumber
Ini harus menjadi bagian dari cli, berikut halaman dokumen penerapan vuejs.org/v2/guide/deployment.html Tergantung pada versi apa yang Anda miliki, template apa yang Anda gunakan, itu mungkin akan sedikit berbeda. Tetapi Anda harus menentukan bahwa Anda sedang melakukan build produksi seperti di dokumen.
— Swimburger
2
Saya menggunakan 2.2.1 vue. Saya melihat dokumentasi, tetapi tidak ada informasi tentang penerapan. Saya tidak menggunakan nodejs pada penghosting. Jadi ketika saya memulainya di localhost berfungsi, tetapi ketika saya mengunduh semua file ke penghosting, tidak ada apa pun di halaman
— artem0071
8
Saat Anda melakukan build, itu mungkin akan mengkompilasi semua file (html, css, js) ke folder a / dist. Folder dist ini harus menjadi root aplikasi Anda di hosting Anda. (Saya belum menggunakan Vue2, tapi saya yakin itu akan ada di sana)
— Swimburger
Hai teman-teman, saya mengalami masalah yang sama minggu lalu dan menulisnya jika itu membantu siapa pun: medium.com/@seenickcode/…
— seenickcode
Saya telah mengunggah file dari folder dist ke cpanel, tetapi hanya ditampilkan kosong
— Fayaz

Jawaban:

171

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.

— Egor Stambakio
sumber
1
Apakah tidak perlu lari npm startatau semacamnya?
— nu everest
@nueverest jika Anda baru saja membuat proyek dengan vue init webpack myprojectAnda akan melihat petunjuk lebih lanjut di konsol Anda: cd myproject, npm install. Setelah npm installsemua paket diunduh dan vue dapat dikompilasi dengan baik npm run devuntuk server pengembangan + hot reload, atau dengan npm run builduntuk membuat bundel yang dapat diterapkan.
— Egor Stambakio
Ini sepertinya tidak bekerja dengan vue router ... Apakah saya melakukan sesuatu yang salah?
— Andy Hayden
1
@AndyHayden dan AWS S3 memeriksa apakah 1) indeks & dokumen kesalahan === index.html; 2) kebijakan ditetapkan untuk situs statis ; 3) Anda build.jsada di dalam distfolder di s3, dan index.htmldi root.
— Egor Stambakio
9
jawabannya harus "isi distfolder adalah semua yang Anda butuhkan. Anda tidak perlu menyalin /index.htmltetapi hanya index.htmldi dalam distfolder yang dibutuhkan. Selain itu, sebelum menjalankan npm run buildAnda harus mengkonfigurasi jalur produksi Anda di config/index.js".
— David 天宇 Wong
24

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" ]
— akinjide
sumber
apakah Anda mengekspos container itu ke luar atau Anda menggunakan nginx atau apache sebagai proxy?
— Hakim
Ya, Anda akan menggunakan Apache atau Nginx sebagai proxy, port 80
— akinjide
paste.ubuntu.com/p/dryhSwnYh5 WORKDIR / usr / src / app dapat menjadi WORKDIR / app? juga CMD ["http-server", "dist"] yang diperlukan untuk melayani melalui server http? bukannya CMD ["npm", "start"]
— LOG_TAG
Versi: webpack 3.12.0 Waktu: 16548ms Ukuran Aset Potongan Nama Potongan build.js 2.15 MB 0 [dipancarkan] [besar] utama build.js.map 9.74 MB 0 [dipancarkan] main - Ini muncul setelah menjalankan cmd di atas ke dalam proyek folder - bisakah Anda memandu saya melalui langkah selanjutnya untuk masuk ke siaran langsung? -
— Hamendra Sunthwal
7

di terminal Anda

npm run build

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

— anasmorahhib
sumber
Ini salah mengasumsikan skrip build ada di package.json.
— crash springfield
4
@crashspringfield Asumsi akurat yang dibuat ketika OP menanyakan secara khusus tentang aplikasi Vue yang dibuat denganvue-cli
— Dan Fletcher
4

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

— jntme
sumber
Pastikan untuk mengubah build: {..... assetsPublicPath: './', titik sebelum garis miring itu penting. Tetapi ada juga assetsPublinPath di objek dev di file itu, jadi pastikan untuk mengubah yang benar.
— Shane G
Versi: webpack 3.12.0 Waktu: 16548ms Ukuran Aset Potongan Nama Potongan build.js 2.15 MB 0 [dipancarkan] [besar] utama build.js.map 9.74 MB 0 [dipancarkan] main - Ini muncul setelah menjalankan cmd di atas ke dalam proyek folder - bisakah Anda memandu saya melalui langkah selanjutnya untuk masuk ke siaran langsung? -
— Hamendra Sunthwal
2

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.

— Gene Yllanes
sumber
1

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

— MaBbKhawaja
sumber
1

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

— Brian Mwangi
sumber
Melakukan hal ini membuat folder dist yang berisi JS / CSS dan HTML yang dibundel untuk penerapan mudah di layanan hosting apa pun
— Tyler Morales
0

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.

— Farcrew Rz
sumber
0

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.

— Yash_6795
sumber
0

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

— Loveun CG
sumber
Anda benar, tetapi seperti yang ditunjukkan oleh jawaban yang diterima, pertanyaannya adalah tentang perintah mana yang harus dijalankan
— JR Utily
0

  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.

0

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.

— pengguna3348410
sumber
cukup unggah folder dist ke ftp Anda dan selesai? & bagaimana cara mengakses aplikasi Vue di server?
— Hamendra Sunthwal
0

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

— Rick K.
sumber
0

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 vue-cli@2.x

Vue Create App

vue init webpack my-project

Jalankan server pengembang

npm run dev
— MD JAMIL AJ
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.