Vue.js 前端專案在常見 Web 伺服器上的部署配置

yuzhihui發表於2023-02-06
Vue.js前端Web伺服器

Web 伺服器是一種用於儲存，處理和傳輸Web內容的軟體。它是一種特殊型別的伺服器，具有處理 HTTP 請求並向瀏覽器返回 Web 頁面和其他內容的能力。Web伺服器支援多種程式語言，如 PHP，JavaScript，Ruby，Python 等，並且支援動態生成 Web 頁面。常見的 Web 伺服器包括 Apache，Nginx，Microsoft IIS等。

 

一、Nginx

Nginx 一般是前端專案部署首選的 Web 伺服器。

使用 Nginx 作為伺服器部署 Vue 專案步驟如下：

  1. 安裝 Nginx：如果還沒有安裝 Nginx，請先安裝它。

  2. 構建 Vue 專案：使用命令“npm run build”在 Vue 專案中構建生產版本的 Vue 專案。

  3. 複製 dist 資料夾：將生成的 dist 資料夾複製到 Nginx 的 html 資料夾中。

  4. 配置 Nginx：編輯 Nginx 的配置檔案（通常為 nginx.conf），新增以下內容以配置對專案的訪問：

server {
    listen 80;
    server_name your_domain_name;
    root /path/to/your/dist;
    index index.html;

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

  1. 重啟 Nginx：使用命令“nginx -s reload”重啟 Nginx。

  2. 瀏覽部署的 Vue 專案：透過瀏覽器訪問 http://your_domain_name/，檢視部署的 Vue 專案。

請注意：以上內容假設已經配置好了域名並將其對映到了伺服器的 IP 地址。如果尚未配置域名，請相應地使用伺服器的 IP 地址替代。

二、Apache

使用 Apache 作為伺服器部署 Vue 專案的步驟如下：

  1. 構建 Vue 專案：在 Vue 專案中使用命令“npm run build”構建生產版本的 Vue 專案。

  2. 安裝 Apache：如果尚未安裝 Apache，請先安裝 Apache。

  3. 配置 Apache：配置 Apache 以讓其可以提供靜態檔案。可以透過在 Apache 配置檔案中新增以下內容來完成此操作：

<Directory "/var/www/html">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

  1. 複製檔案：將生成的 dist 資料夾中的檔案複製到 Apache 的根目錄下的 /var/www/html 目錄中。

  2. 配置 URL 重寫：安裝 mod_rewrite 模組，然後在 Apache 配置檔案中新增以下 URL 重寫規則：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

  1. 重啟 Apache：使用命令“sudo service apache2 restart”重啟 Apache。

  2. 測試：透過瀏覽器訪問伺服器的 IP 地址或域名，檢視部署的 Vue 專案。

請注意：以上內容假設已經配置好了域名並將其對映到了伺服器的 IP 地址。如果尚未配置域名，請相應地使用伺服器的 IP 地址替換。另外，配置檔案路徑和命令可能因作業系統不同而有所不同，請根據實際情況進行調整。

三、IIS

使用 IIS 作為伺服器部署 Vue 專案的步驟如下：

  1. 構建 Vue 專案：在 Vue 專案中使用命令“npm run build”構建生產版本的 Vue 專案。

  2. 安裝 IIS：如果尚未安裝 IIS，請先安裝 IIS。

  3. 建立站點：在 IIS 中建立一個新站點，將生成的 dist 資料夾中的檔案複製到站點的根目錄中。

  4. 配置 Default Document：在 IIS 中的站點配置中，將“index.html”設定為預設檔案。

  5. 配置 URL 重寫：安裝 URL 重寫模組（ARR：Application Request Routing），然後在 IIS 中的站點配置中新增以下 URL 重寫規則：

<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
    <match url="^.*" />
    <conditions logicalGrouping="MatchAny">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    </conditions>
    <action type="Rewrite" url="/" />
</rule>
  1. 啟動站點：啟動站點，透過瀏覽器訪問站點 URL 檢視部署的 Vue 專案。

請注意：以上內容假設已經配置好了域名並將其對映到了伺服器的 IP 地址。如果尚未配置域名，請相應地使用伺服器的 IP 地址替代。

四、Apache Tomcat

使用Apache Tomcat作為伺服器部署Vue專案步驟如下：

  1. 安裝Apache Tomcat：如果還沒有安裝Apache Tomcat，請先安裝它。

  2. 構建Vue專案：使用命令“npm run build”在Vue專案中構建生產版本的Vue專案。

  3. 複製dist資料夾：將生成的dist資料夾複製到Apache Tomcat的webapps資料夾中。

  4. 配置Context：在Tomcat的conf/server.xml檔案中，新增以下內容以配置對專案的訪問：

<Context path="" docBase="your_project_name" />

  1. 啟動Tomcat伺服器：啟動Tomcat伺服器。

  2. 瀏覽部署的Vue專案：透過瀏覽器訪問 http://localhost:8080/your_project_name/，檢視部署的Vue專案。

注意：以上內容假設使用的是Tomcat的預設埠8080。如果使用了其他埠，請相應地更改瀏覽器訪問地址。

 

相關文章