Nginx 简介
Nginx 是一款轻量级的 HTTP 服务器，采用事件驱动的异步非阻塞处理方式，具有极高的 IO 性能。在生产环境中，它常被用作反向代理和负载均衡器。
核心优势：
- 高并发支持：基于 epoll 机制，官方测试可支撑 5 万并发连接，实际生产环境通常能稳定承载 2-4 万。
- 资源占用低：内存消耗相对较少。
- 配置灵活：配置文件简洁，支持灰度发布、负载均衡等高级功能。
部署步骤
1. 安装 Nginx
虽然 Windows 环境下也能运行 Nginx，但生产环境更推荐使用 Linux。
Windows 环境
直接下载对应版本的压缩包解压即可。启动命令示例：
cd F:\nginx-1.19.4
start nginx
Linux 环境
Linux 下安装主要有两种方式：使用官方编译好的包或源码构建。
- 包管理安装：参考 官方文档。
- 源码编译：下载 tar.gz 包后自行编译，详见 Building from Sources。
无论哪种方式，核心逻辑一致：将打包后的 dist 目录上传至服务器，修改 Nginx 配置中的 root 路径指向该目录。
重启服务命令（以 CentOS 为例）：
# CentOS 7
systemctl restart nginx.service
# 平滑重载配置
service nginx reload
2. 打包 Vue 项目
在本地开发机执行构建命令，生成静态资源：
npm run build
构建完成后，你会得到一个包含 index.html、js、css 等文件的 dist 目录。
3. 配置 Nginx
这是最关键的一步。Vue 作为单页应用（SPA），其路由通常由前端 JS 处理。如果用户直接访问某个子路径（如 /user/profile）并刷新浏览器，Nginx 会尝试寻找该物理文件，导致 404 错误。我们需要配置 Nginx 将所有请求回退到 index.html。
编辑 conf/nginx.conf，找到 server 块，配置如下：
server {
listen 80;
server_name localhost;
# 指向 Vue 项目的 dist 目录
root /path/to/your/project/dist;
index index.html index.htm;
location / {
# 核心配置：优先查找文件，找不到则重写为 index.html
try_files $uri $uri/ @router;
}
# 兜底规则：所有未匹配的路径都返回 index.html
location @router {
rewrite ^.*$ /index.html last;
}
}
