apache伺服器部署vue項目-前端問答-PHP中文網

apache伺服器部署vue項目

王林

發布： 2023-05-24 13:31:08

原創

1995 人瀏覽過

隨著前端開發技術的快速發展，越來越多的靜態頁面專案被打包成了SPA（Single Page Application，即單頁應用），而Vue.js作為其中的佼佼者，便成為了越來越多前端開發者的首選。

Vue.js的部署方式很多，其中一個比較常用的方式是利用Apache伺服器來部署Vue.js專案。接下來，我們將介紹如何在Apache伺服器上部署Vue.js專案。

1.安裝Apache伺服器

首先，我們要安裝Apache伺服器。在Ubuntu作業系統上，可以透過以下命令進行安裝：

sudo apt-get update
sudo apt-get install apache2

登入後複製

2.將Vue.js專案打包

進入Vue.js專案路徑下，使用以下命令將專案打包：

npm run build

登入後複製

執行完該指令後，會在專案下產生一個dist資料夾，裡麵包含了我們需要部署的檔案。

3.建立Apache虛擬主機

在部署Vue.js專案之前，我們需要先建立一個Apache虛擬主機。在Ubuntu作業系統上，Apache虛擬主機的設定檔位於/etc/apache2/sites-available目錄下。

建立虛擬主機設定文件，例如：

sudo nano /etc/apache2/sites-available/vue.conf

登入後複製

在檔案中新增以下內容：

<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>

登入後複製

其中，ServerName項目填寫網域或IP位址，DocumentRoot項目填寫Vue.js專案打包資料夾的路徑。

儲存檔案後，執行下列指令使修改生效：

sudo a2ensite vue.conf

登入後複製

接著，重新啟動Apache伺服器：

sudo service apache2 restart

登入後複製

4.部署Vue.js專案

#將Vue.js專案打包後得到的dist資料夾複製到Apache虛擬主機配置中的DocumentRoot路徑下。

為了確保Apache伺服器可以正常載入這些文件，我們需要在index.html檔案裡新增一個base標籤，指定HTML檔案在哪個目錄下。例如：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue App</title>
    <base href="/">
    <!-- 其他依赖资源 -->
</head>

登入後複製

儲存完修改後，我們就可以透過存取虛擬主機的網域名稱或IP位址來存取Vue.js專案了。

總結

以上便是利用Apache伺服器來部署Vue.js專案的方法。部署過程可能會因個人環境的不同而略有差異，但總的來說，只需要按照上述步驟操作即可順利完成部署。值得一提的是，Vue.js的部署方式非常靈活，讀者可以根據自己的需求隨意選擇適合自己的方式。

以上是apache伺服器部署vue項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！