pelayan apache menggunakan projek vue-Soal Jawab bahagian hadapan-php.cn

pelayan apache menggunakan projek vue

王林

Lepaskan： 2023-05-24 13:31:08

asal

1995 orang telah melayarinya

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

Salin selepas log masuk

2 Pakej projek Vue.js

Masukkan laluan projek Vue.js dan gunakan arahan berikut untuk membungkus. projek:

npm run build

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

Kemudian, mulakan semula pelayan Apache:

sudo service apache2 restart

Salin selepas log masuk

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>

Salin selepas log masuk

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!