必须。Vue前端与Node后端应在宝塔中分设为两个独立网站，前端托管静态文件、后端作为本地服务（如127.0.0.1:3000），通过Nginx反向代理实现/api/路径转发，并配置try_files解决history路由404问题。
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% 的“启动成功但打不开”问题出在端口没通透，不是代码或配置错了。
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 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 配置）都得对得上，少一环就卡住。建议每次只动一处，验证后再继续。
