Rumah > Artikel > hujung hadapan web > pelayan apache menggunakan projek vue
pelayan apache menggunakan projek vue
- 王林asal
- 2023-05-24 13:31:081953semak imbas
Dengan perkembangan pesat teknologi pembangunan bahagian hadapan, semakin banyak projek halaman statik dibungkus ke dalam SPA (Aplikasi Halaman Tunggal), dan Vue.js, sebagai peneraju di kalangan mereka, telah menjadi semakin popular pilihan pertama lebih ramai pembangun bahagian hadapan.
Terdapat banyak cara untuk menggunakan Vue.js Salah satu cara yang lebih biasa ialah menggunakan pelayan Apache untuk menggunakan projek Vue.js. Seterusnya, kami akan memperkenalkan cara untuk menggunakan projek Vue.js pada pelayan Apache.
1 Pasang pelayan Apache
Pertama, kita perlu memasang pelayan Apache. Pada sistem pengendalian Ubuntu, anda boleh memasangnya melalui arahan berikut:
sudo apt-get update sudo apt-get install apache2
2 Pakej projek Vue.js
Masukkan laluan projek Vue.js dan gunakan arahan berikut untuk membungkus. projek:
npm run build
Selepas melaksanakan arahan ini, folder dist akan dihasilkan di bawah projek, yang mengandungi fail yang perlu kami gunakan.
3 Cipta hos maya Apache
Sebelum menggunakan projek Vue.js, kami perlu mencipta hos maya Apache terlebih dahulu. Pada sistem pengendalian Ubuntu, fail konfigurasi hos maya Apache terletak dalam direktori /etc/apache2/sites-available.
Buat fail konfigurasi hos maya, contohnya:
sudo nano /etc/apache2/sites-available/vue.conf
Tambah kandungan berikut dalam fail:
<VirtualHost *:80>
# 端口号可以更改
ServerName yoursite.com
# 域名或者IP地址
DocumentRoot /var/www/vue
# Vue.js项目打包文件夹的路径
<Directory /var/www/vue>
Options -Indexes
AllowOverride All
Order allow,deny
allow from all
Require all granted
</Directory>
ErrorLog /var/log/apache2/vue_error.log
CustomLog /var/log/apache2/vue_access.log combined
</VirtualHost>Antaranya, item ServerName mengisi domain nama atau alamat IP, DocumentRoot Isikan laluan folder pembungkusan projek Vue.js.
Selepas menyimpan fail, laksanakan arahan berikut untuk menjadikan pengubahsuaian berkesan:
sudo a2ensite vue.conf
Kemudian, mulakan semula pelayan Apache:
sudo service apache2 restart
4
Salin folder dist yang diperolehi selepas membungkus projek Vue.js ke laluan DocumentRoot dalam konfigurasi hos maya Apache.
Untuk memastikan pelayan Apache boleh memuatkan fail ini seperti biasa, kami perlu menambah tag index.html pada fail base untuk menentukan direktori di mana fail HTML itu berada. Contohnya:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue App</title>
<base href="/">
<!-- 其他依赖资源 -->
</head>Selepas menyimpan perubahan, kami boleh mengakses projek Vue.js dengan mengakses nama domain atau alamat IP hos maya.
Ringkasan
Di atas ialah cara menggunakan pelayan Apache untuk menggunakan projek Vue.js. Proses penempatan mungkin berbeza sedikit bergantung pada persekitaran peribadi anda, tetapi secara amnya, anda hanya perlu mengikuti langkah di atas untuk menyelesaikan penggunaan dengan lancar. Perlu dinyatakan bahawa kaedah penggunaan Vue.js adalah sangat fleksibel, dan pembaca boleh memilih kaedah yang sesuai dengan mereka mengikut keperluan mereka sendiri.
Atas ialah kandungan terperinci pelayan apache menggunakan projek vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!