Vue.js 前端項目在常見 Web 服務器上的部署配置過程

Posted on by

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 項目的步驟如下：

  • 構建 Vue 項目：在 Vue 項目中使用命令“npm run build”構建生產版本的 Vue 項目。
  • 安裝 Apache：如果尚未安裝 Apache，請先安裝 Apache。
  • 配置 Apache：配置 Apache 以讓其可以提供靜態文件。可以通過在 Apache 配置文件中添加以下內容來完成此操作：
<Directory "/var/www/html">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>
  • 復制文件：將生成的 dist 文件夾中的文件復制到 Apache 的根目錄下的 /var/www/html 目錄中。
  • 配置 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>
  • 重啟 Apache：使用命令“sudo service apache2 restart”重啟 Apache。
  • 測試：通過瀏覽器訪問服務器的 IP 地址或域名，查看部署的 Vue 項目。

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

三、IIS

使用 IIS 作為服務器部署 Vue 項目的步驟如下：

  • 構建 Vue 項目：在 Vue 項目中使用命令“npm run build”構建生產版本的 Vue 項目。
  • 安裝 IIS：如果尚未安裝 IIS，請先安裝 IIS。
  • 創建站點：在 IIS 中創建一個新站點，將生成的 dist 文件夾中的文件復制到站點的根目錄中。
  • 配置 Default Document：在 IIS 中的站點配置中，將“index.html”設置為默認文檔。
  • 配置 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>
  • 啟動站點：啟動站點，通過瀏覽器訪問站點 URL 查看部署的 Vue 項目。

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

四、Apache Tomcat

使用Apache Tomcat作為服務器部署Vue項目步驟如下：

  • 安裝Apache Tomcat：如果還沒有安裝Apache Tomcat，請先安裝它。
  • 構建Vue項目：使用命令“npm run build”在Vue項目中構建生產版本的Vue項目。
  • 復制dist文件夾：將生成的dist文件夾復制到Apache Tomcat的webapps文件夾中。
  • 配置Context：在Tomcat的conf/server.xml文件中，添加以下內容以配置對項目的訪問：
<Context path="" docBase="your_project_name" />
  • 啟動Tomcat服務器：啟動Tomcat服務器。
  • 瀏覽部署的Vue項目：通過瀏覽器訪問 http://localhost:8080/your_project_name/，查看部署的Vue項目。

註意：以上內容假設使用的是Tomcat的默認端口8080。如果使用瞭其他端口，請相應地更改瀏覽器訪問地址。

到此這篇關於Vue.js 前端項目在常見 Web 服務器上的部署配置的文章就介紹到這瞭,更多相關Vue.js 前端項目部署web服務器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：