介绍在 Windows 系统下安装和配置 Nginx 的方法，实现 Vue 前端静态资源托管及后端 API 反向代理。通过配置 server 块和 location 规则，解决跨域问题并统一访问入口。涵盖下载启动、项目构建部署、配置文件修改、效果验证及常见问题排查，适用于本地开发环境的前后端一体化部署场景。
在现代 Web 开发中，前后端分离架构已成为主流。前端使用 Vue、React 等框架构建 SPA（单页应用），后端提供 RESTful API 服务。为了在本地或生产环境中高效部署这类应用，Nginx 是一个非常优秀的轻量级 Web 服务器和反向代理工具。
本文介绍如何在 Windows 系统下下载、安装并配置 Nginx，实现以下目标：
http://localhost:8080）Nginx 官方不提供 Windows 安装包，但提供了可直接运行的压缩包。
nginx/Windows-1.25.5）D:\tools\nginx-1.25.5
注意：Windows 版本是'开发用途'，官方建议生产环境使用 Linux，但本地开发完全够用。
打开命令提示符（CMD）或 PowerShell，进入 Nginx 目录：
cd D:\tools\nginx-1.25.5
启动 Nginx：
start nginx
访问浏览器 http://localhost，看到 'Welcome to nginx!' 页面即表示启动成功。
提示：停止 Nginx：
nginx -s stop；重载配置：nginx -s reload（修改配置后必须执行！）；查看进程：任务管理器中查找nginx.exe
假设你已有一个 Vue 项目（Vue 2 或 Vue 3）。
cd your-vue-project
npm run build
生成的静态文件默认在 dist/ 目录下。
建议结构如下：
D:\tools\nginx-1.25.5\
├── html/
│ └── vue-app/ ← 把 dist 内容放这里
├── conf/
│ └── nginx.conf ← 主配置文件
└── ...
或者直接替换 html 目录下的内容（简单场景）：
# 清空原 html，放入你的 Vue 构建产物
rmdir /s /q html
xcopy dist html /e /i
关键在于 反向代理（Reverse Proxy） —— 将 /api 开头的请求转发给后端服务，其余请求返回前端页面。
conf/nginx.conf打开 nginx.conf，找到 server 块，替换为以下内容：
server {
listen 80;
server_name localhost;
# 前端静态资源
location / {
root html/vue-app; # 指向你的 Vue dist 目录
index index.html index.htm;
try_files $uri $uri/ /index.html; # 支持 Vue Router 的 history 模式
}
# 后端 API 反向代理（解决跨域）
location /api/ {
proxy_pass http://localhost:8080/; # 注意结尾的斜杠！
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# 可选：其他后端服务（如 WebSocket）
# location /ws/ {
# proxy_pass http://localhost:9000;
# proxy_http_version 1.1;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection "upgrade";
# }
}
root html/vue-app;：指定前端资源根目录try_files $uri $uri/ /index.html;：确保 Vue Router 的 history 模式能正常刷新页面proxy_pass http://localhost:8080/;：将 /api/xxx 请求代理到后端（如 Spring Boot 默认端口 8080）注意：
proxy_pass结尾的/很重要！
- 有
/：/api/user→http://localhost:8080/user- 无
/：/api/user→http://localhost:8080/api/user
修改完后，在 Nginx 目录下执行：
nginx -s reload
/api/login，实际被 Nginx 转发到 http://localhost:8080/loginroot 路径是否正确（建议用绝对路径）try_files 配置存在（Vue Router 必需）http://localhost:8080 是否能直接访问proxy_pass 地址写错？注意端口号和协议（http/https）nginx -s reloadnginx -t 可验证配置文件是否正确nginx.confmkcert 生成本地证书，配置 SSLstart nginx 加入 Windows 任务计划程序logs/access.log 和 logs/error.log
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online