Nginx 是什么
Nginx 是一款轻量级 HTTP 服务器,事件驱动、异步非阻塞的架构让它 IO 性能很出色,常用来做反向代理和负载均衡。
几个明显的好处:
- 高并发:IO 多路复用 epoll,官方测试能撑 5 万并发,实际生产环境 2–4 万没问题。
- 内存占用小。
- 配置直观,可商用。
当然,反向代理、灰度发布、负载均衡这些能力它也都有,但部署一个前端 Vue 项目我们暂时用不到那么多。
安装 Nginx
Windows 上直接去官网下载对应的包,安装后启动:

cd F:\nginx-1.19.4 && start nginx
但实际部署很少用 Windows,Linux 才是常态。Linux 下要么用官方编译好的包,要么自己下载源码编译。
- 包管理方式:参考 官方文档
- 源码编译:参考 Building from Sources,本质就是 tar.gz 包丢到服务器上编译。
装好之后,把构建好的 Vue 项目 dist 上传,然后用类似下面的命令重启或重载 Nginx:
# CentOS 7
systemctl restart nginx.service
# CentOS 6
service nginx restart
# 平滑重载(推荐)
service nginx reload
打包 Vue 项目
本地项目根目录执行:
npm run build

dist 就是待部署的静态文件。
配置 Nginx
核心配置在 conf/nginx.conf 里的 server 块。一个典型的前端部署配置:
server {
listen 80; # 端口没被占用就不用改
server_name localhost;
root E:/vue_project/my_project/dist; # 指向打包后的 dist 目录
location / {
try_files $uri $uri/@router; # 配合下面的 @router 解决 Vue history 路由刷新 404
index index.html index.htm;
}
location @router {
rewrite ^.*$/index.html last; # 把所有找不到的路径都丢给 index.html,交给前端路由处理
}
}
这里 try_files 和 是专门为 Vue 的 history 模式路由准备的——因为那些路径在服务器上并不真实存在,直接访问就会 404,所以需要重写到 。


