Nginx 部署 Vue 单页应用实战指南
概述
Nginx 是一款高性能的 HTTP 服务器和反向代理工具。在 Web 开发中，它常被用作静态资源托管和后端 API 的反向代理。本文详细介绍如何将基于 Vue 框架构建的前端项目部署到 Nginx 服务器上。
构建 Vue 项目
使用 Vue 官方脚手架完成项目开发后，需要将项目打包为静态资源文件。执行以下命令完成构建：
npm run build
构建完成后，静态文件会生成在项目根目录下的 dist 文件夹中，包含 index.html 及相关的 JavaScript、CSS 资源文件。
Windows 环境安装配置
安装步骤
从 Nginx 官方网站下载与操作系统匹配的 Windows 版本压缩包，解压后目录结构如下：
- nginx.exe - 主程序
- conf/ - 配置目录
- logs/ - 日志目录
- html/ - 默认站点目录
启动服务
在 Nginx 安装目录下执行启动命令：
cd D:\Server\nginx-1.24.0
start nginx
查看进程状态：
tasklist /fi "imagename eq nginx.exe"
配置站点
编辑 conf/nginx.conf 文件，修改 server 配置段：
server {
listen 8080;
server_name localhost;
root E:/projects/my-vue-app/dist;
index index.html index.htm;
location / {
try_files $uri $uri/ @fallback;
}
location @fallback {
rewrite ^.*$ /index.html last;
}
}
关键配置说明：
listen: 监听的端口号，80 端口若被占用可改为其他端口root: 指向 Vue 项目打包后的 dist 目录try_files: 用于支持 Vue 路由模式，确保刷新页面时正确加载@fallback: 路由重写规则，将非文件请求重定向到 index.html
重载配置
修改配置后，执行以下命令重新加载：
nginx -s reload
访问地址：http://localhost:8080
Linux 环境配置
安装方式
生产环境通常使用 Linux 系统，Nginx 安装有两种常用方式：
方式一：使用包管理工具
参考官方文档：Linux Packages
方式二：源码编译安装
下载源码包后进行编译安装，参考 Building from Sources
部署步骤
- 将本地构建的 dist 目录上传到 Linux 服务器
- 修改 Nginx 配置文件中的 root 路径指向 dist 目录
- 重启 Nginx 服务
# CentOS 7+
systemctl restart nginx
# CentOS 6
service nginx restart
平滑重启（不中断现有连接）：
service nginx reload
常见问题处理
页面刷新 404
这是因为 Nginx 无法找到路由对应的实际文件。解决方法就是配置 try_files 指令配合重写规则，将所有请求转发到 index.html，由 Vue 路由接管处理。
静态资源加载失败
检查 root 路径是否正确指向 dist 目录，确保文件路径不存在中文或特殊字符。
