在现代 Web 开发中,前后端分离架构已成为主流。前端使用 Vue、React 等框架构建 SPA(单页应用),后端提供 RESTful API 服务。为了在本地或生产环境中高效部署这类应用,Nginx 是一个非常优秀的轻量级 Web 服务器和反向代理工具。
本文介绍如何在 Windows 系统下下载、安装并配置 Nginx,实现以下目标:
- 前端 Vue 项目的静态资源托管
- 后端 API 请求的反向代理(解决跨域)
介绍在 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