Web 服务器是一种用于存储，处理和传输 Web 内容的软件。它是一种特殊类型的服务器，具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力。Web服务器支持多种编程语言，如 PHP，JavaScript，Ruby，Python 等，并且支持动态生成 Web 页面。常见的 Web 服务器包括 Apache，Nginx，Microsoft IIS 等。对于目前流行的前后端分离开发模式项目，前端往往需要使用 Web 服务器进行独立部署。
一、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;
location / {
try_files $uri $uri/ /index.html;
}
# 代理转发接口请求
location /api {
proxy_pass http://service_api_ip:service_api_port/service_api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}-
重启 Nginx：使用命令“nginx -s reload”重启 Nginx。
-
浏览部署的 Vue 项目：通过浏览器访问 http://your_domain_name/，查看部署的 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="proxy_forwarding" stopProcessing="true">
<match url="^(.*?)/?api/(.*)$" />
<conditions>
<add input="{HTTP_HOST}" pattern="^current_site_ip:current_site_port$" />
</conditions>
<action type="Rewrite" url="http://service_api_ip:service_api_port/service_api/{R:2}" />
</rule>
<!--
<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 (httpd)
使用 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 地址替换。另外，配置文件路径和命令可能因操作系统不同而有所不同，请根据实际情况进行调整。
其中 2.4 版本的 反向代理（即代理转发对服务接口的请求）功能配置具体详细配置说明请参考 官方文档。
四、Apache Tomcat
经实践，Apache Tomcat 对请求的代理转发功能有限（无法配置对特定 URIs 请求的转发，如：http://domain:port/api/），无法实现对 Vue/ React/ Angular 前端项目的部署。如果要扩展 Apache Tomcat 的代理转发功能，需要 Apache httpd 的 mod_proxy 模块 支持。
使用 Apache Tomcat 作为服务器部署 Vue 项目步骤如下：
-
准备工作：确保已经安装了 Apache Tomcat，并且知道其安装路径。
-
构建 Vue 项目：在项目根目录中执行
npm run build命令以构建项目。构建完成后，会在项目根目录中生成一个 "dist" 目录，其中包含了所有的静态文件。 -
将 "dist" 目录复制到 Apache Tomcat 的 webapps 目录中：例如，如果 Apache Tomcat 安装在 "C:\Tomcat" 中，则可以将 "dist" 目录复制到 "C:\Tomcat\webapps" 中。
-
重命名 "dist" 目录：将 "dist" 目录重命名为想要的名称，例如 "my-app"。
- 代理转发配置：修改 Apache Tomcat 的配置文件，打开 "C:\Tomcat\conf\server.xml" 文件，并在其中添加以下内容：
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" proxyName="localhost" proxyPort="<PROXY_PORT>" />其中，"<PROXY_PORT>" 是后端 API 服务器所在主机的端口号。
-
启动 Apache Tomcat：运行 Apache Tomcat 安装目录中的 "bin/startup.bat" 文件以启动 Apache Tomcat。
-
访问 Vue 应用程序：在浏览器中访问 "http://localhost:8080/my-app"（其中 "my-app" 是在第 4 步中命名的名称），应该就可以看到 Vue 应用程序。
注意：以上内容假设使用的是 Tomcat 的默认端口8080。如果使用了其他端口，请相应地更改浏览器访问地址。