Gunakan halaman akses pelayan selepas membungkus projek vue

Selepas kami melengkapkan pembangunan projek Vue, kami perlu membungkusnya dan menggunakan ia ke pelayan supaya kami boleh mengakses halaman projek dalam persekitaran rangkaian. Artikel ini akan memperkenalkan secara ringkas cara untuk membungkus dan menggunakan projek Vue, dan menyediakan penyelesaian kepada beberapa masalah biasa supaya pembaca boleh berjaya menggunakan projek Vue ke pelayan.

1. Pembungkusan projek Vue

Sebelum memulakan pembungkusan, anda perlu memasang Node.js dan npm. Jika anda telah menyelesaikan langkah-langkah ini, anda boleh memasukkan direktori akar projek Vue dan laksanakan arahan berikut mengikut urutan:

npm run build

Arahan ini akan menghasilkan folder A bernama "dist ". Dalam direktori dist, akan ada fail "index.html" dan folder "statik", yang merupakan fail teras yang perlu kami muat naik ke pelayan.

2. Sebarkan ke pelayan

1. Muat naik ke pelayan

Anda boleh menggunakan alat FTP untuk memuat naik folder dist ke pelayan, atau gunakan arahan SSH Pindahkan fail ke pelayan. Di sini kita mengambil menggunakan FTP sebagai contoh.

Sebelum memuat naik fail, anda perlu memastikan bahawa anda telah mencipta direktori akar tapak web anda pada pelayan. Muat naik folder dist ke direktori akar tapak web anda, kemudian pastikan bahawa fail index.html dan folder statik kedua-duanya berada dalam direktori akar tapak web.

2. Mengkonfigurasi pelayan

Sebelum menggunakan projek Vue ke pelayan, anda perlu memastikan bahawa Node.js dan npm dipasang pada pelayan.

Gunakan klien SSH untuk log masuk ke pelayan, masukkan direktori akar tapak web, dan laksanakan arahan berikut:

npm install -g http-server

Selepas pemasangan selesai, laksanakan arahan berikut Mulakan pelayan:

http-server -p 8080

Arahan ini akan memulakan pelayan pada port tempatan 8080. Anda boleh mengakses tapak web anda melalui http://alamat IP pelayan anda:8080.

3. Menyelesaikan masalah biasa

Apabila menggunakan projek Vue ke pelayan, anda mungkin menghadapi beberapa masalah biasa. Berikut ialah beberapa masalah yang mungkin dan penyelesaiannya:

1) Ralat 404 berlaku semasa mengakses

Jika anda menerima ralat 404 semasa mengakses, ia mungkin disebabkan pelayan anda tidak dikonfigurasikan penghalaan dengan betul. Anda boleh cuba menggunakan mod Hash untuk penghalaan, ubah suai fail konfigurasi projek Vue:

Ubah suai dalam fail src/router/index.js:

const router = new VueRouter({
mod: 'hash',
laluan: [

{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  component: About
}

]
})

Selepas pengubahsuaian, bungkus semula dan gunakan ke pelayan, dan kemudian lawati sekali lagi.

2) Pemuatan fail statik gagal

Jika fail statik anda gagal dimuatkan, ini mungkin kerana pelayan anda tidak mempunyai jenis MIME yang dikonfigurasikan dengan betul. Masalah ini boleh diselesaikan dengan menambahkan kandungan berikut pada fail konfigurasi Nginx:

lokasi / {
add_header Content-Type "text/html";
add_header X-Content-Type-Options nosniff ;
}

lokasi ~* .(png|jpg|jpeg|gif|css|js|ico)$ {
add_header Content-Type "image/png";
add_header X -Kandungan -Jenis-Pilihan nosniff;
}

3) Isu kebenaran akses folder pelayan

Jika anda mendapat ralat 403 semasa memuat naik projek Vue ke pelayan, ini mungkin kerana pelayan anda tidak Membetulkan kebenaran akses folder. Masalah ini boleh diselesaikan dengan melaksanakan arahan chmod untuk menukar kebenaran folder:

nama folder chmod 755

4. Kesimpulan

Artikel ini memperkenalkan secara ringkas cara membungkus dan menggunakan Vue projek , dan menyelesaikan beberapa masalah yang mungkin. Saya harap artikel ini boleh membawa anda sedikit bantuan apabila menggunakan projek Vue anda ke pelayan. Semasa operasi khusus, pelarasan khusus perlu dibuat berdasarkan sistem pengendalian pelayan dan syarat lain. Saya doakan anda berjaya dalam menyelesaikan penggunaan projek Vue anda.

Atas ialah kandungan terperinci Gunakan halaman akses pelayan selepas membungkus projek vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!