一、什么是 Nginx
Nginx 是一款轻量级的 HTTP 服务器，采用事件驱动的异步非阻塞处理方式，具有极高的 IO 性能。在生产环境中，它常被用于反向代理、负载均衡以及静态资源托管。
核心优势：
- 高并发支持：基于 epoll 模型，官方测试可支撑 5 万并发连接，实际生产环境通常能稳定承载 2-4 万连接。
- 资源占用低：内存消耗相对较少。
- 配置灵活：配置文件简洁，支持灰度发布、负载均衡等高级功能。
二、部署 Vue 项目的完整流程
1. 安装 Nginx
虽然 Windows 环境下也能运行 Nginx，但生产环境通常首选 Linux。根据系统不同，安装方式略有差异。
Windows 环境
直接下载对应版本的安装包即可。启动服务后，在命令行执行以下命令：
cd F:\nginx-1.19.4
start nginx
Linux 环境
主要有两种安装方式：使用官方编译好的包（如 yum/apt），或源码编译。推荐参考 Nginx 官网文档获取最新安装步骤。
一旦安装完成，将打包后的 Vue 项目 dist 目录上传至服务器，修改 Nginx 配置中的 root 路径指向该目录即可。重启服务时可根据版本选择：
# CentOS 7
systemctl restart nginx.service
# CentOS 6
service nginx restart
# 平滑重载配置
service nginx reload
2. 打包 Vue 项目
在本地开发环境中，执行构建命令生成静态资源：
npm run build
构建完成后，根目录下会生成一个 dist 文件夹，里面包含了所有编译后的 HTML、CSS 和 JS 文件。
3. 配置 Nginx
这是最关键的一步。由于 Vue 是单页应用（SPA），路由由前端 JavaScript 控制，而非服务器端文件。如果直接访问子路由刷新页面，Nginx 找不到对应的物理文件就会返回 404。因此需要配置 try_files 规则。
打开 conf/nginx.conf，找到 server 块并修改如下：
server {
listen 80;
server_name localhost;
# 指向 Vue 项目打包后的 dist 目录
root E:/vue_project/my_project/dist;
location / {
# 核心配置：优先尝试匹配真实文件，失败则重写为 index.html
try_files $uri $uri/ @router;
index index.html index.htm;
}
# 处理 SPA 路由重定向
location @router {
rewrite ^.*$ /index.html last;
}
}
配置完成后，重新加载 Nginx 使更改生效：
nginx -s reload
最后，在浏览器访问 http://localhost 进行测试。如果页面正常显示且刷新任意路由均不报错，说明部署成功。
