Web 服務器是一種用于存盤，處理和傳輸Web內容的軟體，它是一種特殊型別的服務器，具有處理 HTTP 請求并向瀏覽器回傳 Web 頁面和其他內容的能力，Web服務器支持多種編程語言，如 PHP，JavaScript，Ruby，Python 等，并且支持動態生成 Web 頁面，常見的 Web 服務器包括 Apache，Nginx，Microsoft IIS等，
一、Nginx
Nginx 一般是前端專案部署首選的 Web 服務器，
使用 Nginx 作為服務器部署 Vue 專案步驟如下：
-
安裝 Nginx：如果還沒有安裝 Nginx，請先安裝它，
-
構建 Vue 專案：使用命令“npm run build”在 Vue 專案中構建生產版本的 Vue 專案，
-
復制 dist 檔案夾：將生成的 dist 檔案夾復制到 Nginx 的 html 檔案夾中，
-
配置 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;
}
}-
重啟 Nginx：使用命令“nginx -s reload”重啟 Nginx，
-
瀏覽部署的 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，如果使用了其他埠，請相應地更改瀏覽器訪問地址，
作者：yuzhihui
出處：http://www.cnblogs.com/yuzhihui/ 宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/543126.html
標籤：其他
上一篇：聊一聊js中元素定位的方法