宝塔部署Vue+Node项目，Nginx代理接口教程

本文详解了在宝塔面板中规范部署Vue+Node全栈项目的完整实践：强调必须将Vue前端（静态站点）与Node后端（本地服务）分设为两个独立网站，通过手动编辑Nginx配置实现精准的/api/路径反向代理，并同步解决Vue history路由刷新404、跨域误判、后端端口不通、请求头丢失等高频故障；内容直击运维痛点，覆盖从架构设计、配置细节、安全组放行到逐层排错的闭环流程，助开发者避开90%的线上部署陷阱。

Vue 前端和 Node 后端必须分开建站吗？

必须。宝塔里「网站」对应一个独立的 Nginx server 块，前端（静态文件）和后端（动态服务）职责不同，混在一个站点里会导致路由冲突、CORS 问题、缓存策略混乱，且无法单独管理 SSL、日志或反向代理规则。

常见错误现象：404 刷页面报错、/api/login 返回前端 index.html、浏览器控制台提示跨域被拒但后端明明没开 CORS —— 很大概率是没分站，或反向代理没配对。

• 前端站点根目录放 dist/ 文件（纯 HTML/CSS/JS）
• Node 站点不绑定域名，只作为本地服务运行（如 http://127.0.0.1:3000），由 Nginx 代理转发请求
• 两个站点可共用一个域名（如 example.com），但路径分离：/ → 前端，/api/ → 后端

在宝塔里怎么配 Nginx 反向代理把 /api 请求转给 Node？

不是在「反向代理」功能里随便填个 URL 就完事。必须进前端站点的「配置文件」手动加 location 块，否则代理规则不会生效，尤其当 Node 接口路径带前缀（如 /api/v1/login）时。

操作步骤：

• 进入宝塔 → 网站 → 找到你的 Vue 前端站点 → 点击「设置」→「配置文件」
• 在 server { ... } 区块内，找到 location / { ... } 上方，插入以下内容：

location ^~ /api/ {
    proxy_pass http://127.0.0.1:3000/;
    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;
}

关键点说明：

• ^~ /api/：优先匹配前缀，避免被 location / 拦截
• proxy_pass 末尾带 /：会剥离 /api/ 前缀再转发，后端收到的是 /v1/login 而非 /api/v1/login；若不加斜杠，整个路径原样转发
• 必须保留 proxy_set_header，否则 Node 的 req.ip 会变成 127.0.0.1，影响限流、日志、白名单等逻辑

Node 后端项目启动后访问不了？检查这三处端口

90% 的“启动成功但打不开”问题出在端口没通透，不是代码或配置错了。

• Node 进程监听的是 127.0.0.1:3000（推荐），不是 0.0.0.0:3000 或 localhost:3000 —— 宝塔的 Nginx 在本机，只需回环地址即可
• 宝塔「安全」页面要放行 3000 端口（即使不对外暴露，Nginx 代理也需要本地通信）
• 云服务器厂商的安全组（如阿里云/腾讯云控制台）也必须放行 3000 —— 很多人只开了宝塔的 8888 和网站的 80/443，忘了后端端口

验证方式：在宝塔终端执行 curl -v http://127.0.0.1:3000/api/test，能返回数据说明 Node 正常；再从浏览器访问前端域名的 /api/test，失败则查 Nginx 配置或日志（/www/wwwlogs/your-site.error.log）。

为什么 Vue 刷新页面 404？别只改 Nginx 配置文件

这是前端路由（如 Vue Router history 模式）导致的典型问题：Nginx 不认识 /user/profile 这种前端路由，直接返回 404，而不是交由 index.html 处理。

正确做法是在前端站点的 Nginx 配置中，确保 location / 块包含 try_files 回退规则：

location / {
    try_files $uri $uri/ /index.html;
}

注意：这个规则必须放在你自定义的 location ^~ /api/ 下方，否则 /api/ 请求也会被 try_files 拦截并错误返回 index.html。

容易踩的坑：

• 复制网上教程时漏掉分号或大括号，导致整个 Nginx 配置语法错误，重启失败
• 改完配置没点「保存」，或保存后没点「重载配置」（宝塔右上角有按钮）
• 用了 location ~ \.js$ 类似规则，干扰了 try_files 的执行顺序

真正复杂的不是配法，而是每层网络设备（云厂商安全组、系统防火墙、宝塔防火墙、Nginx 配置）都得对得上，少一环就卡住。建议每次只动一处，验证后再继续。

今天关于《宝塔部署Vue+Node项目，Nginx代理接口教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！