Cara untuk menggunakan projek Vue.js ke pelayan

Dengan perkembangan teknologi front-end, skop tanggungjawab front-end telah menjadi lebih luas. Vue.js, sebagai rangka kerja JavaScript, telah digunakan secara meluas dalam pembangunan bahagian hadapan. Memandangkan aplikasi terus berkembang, aplikasi Vue.js perlu digunakan pada pelayan supaya ia boleh diakses dalam penyemak imbas web. Artikel ini akan memperkenalkan cara untuk menggunakan aplikasi Vue.js ke pelayan.

1. Pembungkusan projek Vue.js

Sebelum menggunakan aplikasi Vue.js, anda perlu membungkus aplikasi Vue.js terlebih dahulu. Pembungkusan aplikasi Vue.js ialah proses mengumpul semua fail statik aplikasi dan menggabungkannya menjadi satu atau lebih fail. Tujuan pembungkusan adalah untuk meningkatkan kelajuan pemuatan aplikasi anda dan memudahkan pembangunan dan penggunaannya.

Untuk aplikasi Vue.js, anda boleh menggunakan Vue CLI untuk pembungkusan. Vue CLI ialah alat baris arahan Vue.js yang boleh membuat dan mengurus projek Vue.js dengan cepat. Mula-mula pastikan Vue CLI dipasang pada komputer tempatan anda. Masukkan arahan berikut dalam terminal arahan:

npm install -g @vue/cli

Selepas melengkapkan pemasangan Vue CLI, anda boleh menggunakan arahan berikut untuk mencipta projek Vue.js:

vue create my-vue-app

Kemudian , masukkan direktori projek Vue.js dan bungkusnya menggunakan arahan berikut:

npm run build

Arahan ini membungkus aplikasi Vue.js ke dalam folder bernama "dist". Folder berpakej mengandungi semua fail statik aplikasi dan fail "index.html", yang boleh dibuka terus dengan penyemak imbas.

2. Pemilihan Pelayan

Sebelum menggunakan aplikasi Vue.js ke pelayan, anda perlu memilih pelayan yang sesuai. Terdapat pelbagai jenis pelayan yang boleh digunakan untuk mengehoskan aplikasi Vue.js, seperti Apache, Nginx, Express, dll. Di sini, kami akan memilih Nginx sebagai pelayan.

Nginx ialah pelayan web yang ringan dengan prestasi yang kukuh dan merupakan pelayan yang digunakan oleh banyak tapak web yang besar. Nginx sangat berskala dan boleh disesuaikan serta boleh dijalankan pada sistem pengendalian seperti Ubuntu dan CentOS.

3. Konfigurasi pelayan

Sebelum memasang Nginx, anda perlu mengemas kini pakej perisian pada pelayan. Masukkan arahan berikut dalam terminal arahan:

sudo apt update
sudo apt upgrade

Selepas mengemas kini pakej perisian, anda boleh menggunakan arahan berikut untuk memasang Nginx:

sudo apt-get install nginx

Selepas pemasangan selesai, Nginx akan bermula secara automatik. Anda boleh menyemak status berjalan Nginx dengan arahan berikut:

sudo systemctl status nginx

Jika semuanya normal, anda akan melihat bahawa Nginx sedang berjalan.

Seterusnya, fail konfigurasi Nginx perlu diubah suai untuk menggunakan aplikasi Vue.js. Pertama, anda perlu membuat sandaran fail konfigurasi lalai Nginx. Masukkan arahan berikut dalam terminal arahan:

sudo mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak

Selepas sandaran selesai, anda boleh mencipta fail konfigurasi baharu. Masukkan arahan berikut dalam terminal arahan:

sudo nano /etc/nginx/sites-available/default

Tambah kandungan berikut dalam fail:

server {
  listen 80;
  server_name your-server-ip;

  location / {
      root /var/www/html/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

Pastikan untuk menggantikan "your-server-ip" dengan alamat IP pelayan anda, Gantikan "/var/www/html/dist" dengan laluan folder pembungkusan aplikasi Vue.js anda.

Simpan dan keluar dari fail, kemudian mulakan semula Nginx untuk perubahan berkuat kuasa. Masukkan arahan berikut dalam terminal arahan:

sudo systemctl restart nginx

4. Gunakan aplikasi Vue.js

Sekarang, aplikasi Vue.js sedia untuk digunakan ke pelayan. Folder pembungkusan aplikasi Vue.js anda boleh dimuat naik ke pelayan menggunakan alatan seperti SCP atau FTP. Selepas muat naik selesai, sila pastikan bahawa kebenaran folder pembungkusan ditetapkan supaya pengguna Nginx mempunyai akses:

sudo chmod -R 755 /var/www/html/dist

Apabila aplikasi Vue.js berjaya digunakan ke pelayan, anda boleh masuk pelayan dalam alamat IP pelayar web anda untuk mengakses aplikasi Vue.js.

Ringkasan

Membungkus aplikasi Vue.js melalui Vue CLI dan mengaturnya menggunakan Nginx kerana pelayan boleh menggunakan aplikasi Vue.js dengan cepat dan mudah ke Internet. Anda boleh menyesuaikan fail konfigurasi Nginx secara bebas untuk memenuhi keperluan anda. Menggunakan aplikasi Vue.js memerlukan berhati-hati, tetapi ia juga merupakan kemahiran yang perlu diketahui oleh setiap pembangun Vue.js.

Atas ialah kandungan terperinci Cara untuk menggunakan projek Vue.js ke pelayan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!