Bagaimana untuk menggunakan halaman statik vue dalam awan kod

Dengan pembangunan berterusan teknologi bahagian hadapan, semakin banyak syarikat dan individu mula menggunakan Vue.js untuk membangunkan aplikasi bahagian hadapan. Bagi pembangun Vue.js, cara menggunakan halaman statik Vue telah menjadi kemahiran yang diperlukan.

Code Cloud ialah platform pengehosan kod sumber terbuka domestik Untuk membantu pembangun Vue.js menggunakan projek ke awan dengan lebih baik, artikel ini akan memperkenalkan cara menggunakan Code Cloud untuk menggunakan halaman statik Vue.

1. Persediaan

Sebelum menggunakan halaman statik Vue, kami perlu memastikan projek kami telah berjaya dibina. Dalam projek Vue.js, Vue CLI biasanya digunakan untuk membina Output binaan akan menjana direktori dist, yang mengandungi semua sumber dan kod statik.

2. Buat gudang dan muat naik kod

Pertama, kita perlu mencipta gudang di Code Cloud. Log masuk ke Awan Kod, masukkan "Awan Kod+", pilih "Buat Gudang", dan kemudian isikan maklumat yang sepadan untuk melengkapkan penciptaan gudang.

Setelah menyelesaikan penciptaan gudang, kami perlu memuat naik kod tempatan ke gudang. Dalam direktori akar projek Vue tempatan, gunakan arahan berikut:

git init
git add .
git commit -m 'first commit'
git remote add origin <仓库地址>
git push -u origin master

Ini akan berjaya memuat naik kod kami ke gudang awan kod.

3. Mengkonfigurasi gudang

Selepas kami memuat naik kod, kami juga perlu mengkonfigurasi tetapan gudang untuk memastikan halaman web kami boleh berjalan dengan betul dalam penyemak imbas.

Pilih "Tetapan" dalam gudang dan tambahkan kunci awam dalam lajur "Kekunci Awam Penerapan" Terdapat dua cara untuk menambahkannya: muat naik terus kunci awam tempatan atau gunakan kunci yang dijana oleh Code Cloud.

Selepas penambahan selesai, kita perlu membuat cawangan baru di gudang Nama cawangan boleh sewenang-wenangnya. Kemudian pilih "Halaman Statik" dalam tetapan cawangan.

Dalam halaman statik, kita perlu memilih Halaman GitHub sebagai pembekal perkhidmatan dan pilih cawangan sebagai cawangan yang baru kita buat.

Seterusnya, kami perlu mengisi fail kemasukan halaman statik kami, yang di sini merujuk kepada fail halaman utama kami, biasanya index.html. Selepas tetapan fail cawangan dan kemasukan selesai, kita boleh mengklik butang "Simpan" untuk melengkapkan konfigurasi gudang.

4. Lihat Halaman

Selepas melengkapkan konfigurasi, kami kini boleh mengakses halaman statik kami melalui penyemak imbas. Pada halaman utama gudang, kami boleh melihat butang "Git Pages" Klik padanya untuk mengakses halaman web penggunaan kami.

Perlu diambil perhatian bahawa kami menggunakan Halaman GitHub, yang akan menggunakan nama gudang kami sebagai nama domain secara lalai. Oleh itu, apabila mengakses halaman, anda perlu menambah "/" dan nama fail kemasukan selepas nama gudang. Contohnya:

https://用户名.gitee.io/仓库名/index.html

5. Kemas Kini Penggunaan

Selepas kami melengkapkan penggunaan pertama, projek kami mungkin dikemas kini dengan kerap. Jadi bagaimana kami boleh mengemas kini kod baharu ke halaman web penggunaan kami? Berikut ialah langkah khusus:

Pertama, kita perlu membina semula kod dalam projek tempatan menggunakan arahan berikut:

npm run build

Ini akan menjana folder dist baharu secara automatik, yang mengandungi kami yang baru diubah suai kod.

Seterusnya, kami perlu menggunakan arahan berikut dalam gudang awan kod untuk menolak kod baharu ke cawangan kami yang baru dibuat:

git push origin 分支名

Selepas muat naik selesai, kami boleh menyemak imbas statik yang dikemas kini halaman boleh dilihat terus dalam pelayan.

Ringkasan

Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan Code Cloud untuk menggunakan halaman statik Vue. Dalam pembangunan sebenar, kami boleh mengkonfigurasi dan menyesuaikannya mengikut situasi khusus yang berbeza. Semoga artikel ini bermanfaat kepada semua.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan halaman statik vue dalam awan kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!