Bagaimana untuk menggunakan pelayan dalam projek vue

Dengan populariti rangka kerja Vue dalam pembangunan bahagian hadapan Web, semakin ramai pembangun menggunakan Vue untuk membina aplikasi Web mereka sendiri. Bagi kebanyakan pembangun, pembangunan tempatan projek Vue bukanlah masalah, tetapi cara untuk menggunakan projek ke pelayan adalah masalah yang lebih menyusahkan. Artikel ini akan berkongsi beberapa pengalaman dan teknik untuk menggunakan projek Vue ke pelayan.

1. Penyediaan persekitaran pelayan

Sebelum menggunakan projek Vue, anda perlu menyediakan pelayan dan memasang persekitaran Node.js dan NPM. Node.js ialah persekitaran berjalan JavaScript berdasarkan enjin Chrome V8, yang boleh menjalankan kod JavaScript, dan NPM ialah alat pengurusan pakej Node.js, digunakan untuk memasang, mengurus dan menerbitkan pakej JavaScript. Jika anda belum memasang Node.js dan NPM, sila pasang kedua-dua perisian ini terlebih dahulu.

Selain itu, anda juga perlu memasang dua alatan Git dan PM2 pada pelayan Git ialah sistem kawalan versi yang digunakan untuk menarik kod dari pangkalan kod, dan PM2 ialah pengurus daemon yang boleh dimulakan , hentikan, mulakan semula dan pantau aplikasi Node.js.

2. Konfigurasikan pelayan Nginx

Sebelum menggunakan projek Vue ke pelayan, anda perlu mengkonfigurasi pelayan Nginx untuk mengendalikan permintaan HTTP. Nginx ialah HTTP berprestasi tinggi dan pelayan proksi terbalik yang boleh menghalakan permintaan ke port yang berbeza dan juga boleh mendayakan sijil SSL untuk menyediakan sokongan HTTPS.

Sebelum mengkonfigurasi Nginx, anda perlu membungkus projek Vue ke dalam fail statik Ini boleh dicapai dengan menggunakan arahan bina dalam Vue CLI:

$ npm run build

Selepas melaksanakan arahan ini, projek itu. akan Direktori dist dijana dalam direktori akar, yang mengandungi fail statik berpakej.

Seterusnya, gunakan arahan berikut untuk memasang Nginx pada pelayan:

$ sudo apt-get update
$ sudo apt-get install nginx

Selepas pemasangan selesai, anda boleh mengedit fail /etc/nginx/sites-available/default untuk mengkonfigurasi Pelayan Nginx:

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    index index.html;

    server_name example.com;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Dalam contoh ini, pelayan Nginx yang mendengar pada port 80 dikonfigurasikan Arahan akar digunakan untuk menetapkan direktori root Nginx, nama_server digunakan untuk menetapkan nama pelayan dan lokasi. arahan digunakan untuk menetapkan laluan permintaan.

Perlu diambil perhatian bahawa memandangkan projek Vue ialah aplikasi satu halaman (SPA), semua halaman dijana secara dinamik oleh JavaScript dan CSS, jadi arahan lokasi perlu ditambahkan pada pelayan Nginx untuk mengendalikan dynamics Routing:

location /api/ {
    proxy_pass http://localhost:3000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

Dalam contoh ini, apabila laluan /api/ diminta, ia diproksikan ke port 3000 mesin tempatan dan beberapa maklumat pengepala HTTP ditetapkan.

3. Gunakan projek Vue ke pelayan

Setelah pelayan Nginx dikonfigurasikan, projek Vue boleh digunakan ke pelayan. Berikut ialah beberapa langkah khusus:

1. Gunakan Git untuk menarik kod projek Vue pada pelayan:

$ git clone https://github.com/username/vue-project.git

2. Masukkan direktori projek dan pasang kebergantungan:

$ cd vue-project
$ npm install

3. Buat fail konfigurasi PM2 dalam direktori akar projek:

{
  "name": "vue-project",
  "script": "npm",
  "args": "start",
  "env": {
    "NODE_ENV": "production"
  }
}

Dalam contoh ini, proses bernama vue-project dikonfigurasikan, menggunakan npm start Perintah memulakan aplikasi dan menetapkan pembolehubah persekitaran pengeluaran.

4. Gunakan PM2 untuk memulakan projek Vue:

$ pm2 start pm2.config.js

Dengan cara ini anda boleh memulakan projek Vue pada pelayan dan mengakses aplikasi dengan mengakses URL pada pelayan Nginx .

4. Kesimpulan

Dalam artikel ini, kami memperkenalkan cara untuk menggunakan projek Vue ke pelayan. Melalui konfigurasi mudah, projek Vue boleh digunakan ke persekitaran pengeluaran, dan Nginx dan PM2 digunakan untuk menyediakan perkhidmatan HTTP yang berkuasa dan fungsi pengurusan proses. Saya harap artikel ini akan membantu pembangun yang ingin menggunakan projek Vue ke pelayan.

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