一、什么是 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 进行测试。如果页面正常显示且刷新任意路由均不报错,说明部署成功。


