一、什么是 Nginx
Nginx 是一款轻量级的 HTTP 服务器，采用事件驱动的异步非阻塞处理方式框架，具有极好的 IO 性能，常用于服务端的反向代理和负载均衡。
优点：
- 支持海量高并发：采用 IO 多路复用 epoll。官方测试 Nginx 能够支持 5 万并发链接，实际生产环境中可以支撑 2-4 万并发连接数。
- 内存消耗少
- 可商业化
- 配置文件简单
此外还包括反向代理功能、灰度发布、负载均衡功能等。
二、Nginx 部署前端 Vue 项目步骤
2.1 安装 Nginx
2.1.1 Windows 环境安装
到 Nginx 官方下载系统相关的版本进行安装。
启动命令：
cd F:\nginx-1.19.4 && start nginx
2.1.2 Linux 环境安装
通常情况下较少使用 Windows 作为 Nginx 服务器，一般使用 Linux。对于 Linux 安装 Nginx 有两种方式：一种是使用官方已经编译好的包来安装，另一种是使用源码构建安装。
第一种方式参考官方地址：https://nginx.org/en/linux_packages.html#stable
第二种方式参考官方地址 https://nginx.org/en/docs/install.html 中的 Building from Sources 片段，即下载 tar.gz 包上传到 Linux 服务器自行编译。
在 Linux 服务和 Windows 环境上使用 Nginx 部署 Vue 项目差异不大，将构建好的 Vue 项目 dist 上传到 Linux 服务器，修改 Nginx 服务器中的 root 指向 dist 即可。然后使用以下命令重启或重载：
# CentOS 7
systemctl restart nginx.service
# CentOS 6
service nginx restart
# 或者平滑重启
service nginx reload
2.2 打包 Vue 项目
执行命令：
npm run build
2.3 配置 Nginx
修改 Nginx 配置文件，通常为 conf 下的 nginx.conf，修改 server 配置片段：
server {
listen 80; # 默认端口是 80，如果端口没被占用可以不用修改
server_name localhost;
root E:/vue_project/my_project/dist; # Vue 项目的打包后的 dist 目录
location / {
try_files $uri $uri/@router; # 需要指向下面的 @router 否则会出现 Vue 的路由在 Nginx 中刷新出现 404
index index.html index.htm;
}
# 对应上面的 @router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
# 因此需要 rewrite 到 index.html 中，然后交给路由在处理请求资源
location @router {
rewrite ^.*$/index.html last;
}
# ... 其他部分省略
}
完成 Nginx 配置后重新加载配置文件：
nginx -s reload
浏览器中访问 http://localhost 测试是否部署成功。