在宝塔面板中部署 Vue 项目打包后的 dist 文件作为前端

在宝塔面板中部署 Vue 项目打包后的 dist 文件作为前端，通常有以下两种常见方式。你可以根据你的实际需求选择：

✅ 方式一：使用 Nginx 站点直接托管静态文件（推荐）

适用于前后端分离架构，前端纯静态资源，后端 API 通过反向代理或跨域调用。

步骤如下：

打包 Vue 项目
bash 复制代码
```
npm run build
```
会在项目根目录生成 dist 文件夹。
登录宝塔面板 → 网站 → 添加站点
- 域名：填写你的前端访问域名（如 web.yourdomain.com）
- 根目录：建议设置为 /www/wwwroot/web.yourdomain.com
上传 dist 文件到该站点根目录
- 可通过宝塔的「文件」功能上传并解压
- 或使用 SFTP 工具（如 WinSCP、FileZilla）上传
- 确保 dist 中的内容（如 index.html, js/, css/）直接放在网站根目录下
配置 Nginx（通常默认即可，但需注意 history 模式）

如果你 Vue Router 使用的是 history 模式，需要添加以下伪静态规则（否则刷新页面会 404）：
nginx 复制代码
```
location / {
    try_files $uri $uri/ /index.html;
}
```
在宝塔面板中：
- 进入该站点 → 「配置文件」或「伪静态」
- 添加上述代码（放在 server {} 块内）
确保后端 API 可跨域访问（开发阶段）
- 生产环境建议前端通过 Nginx 反向代理 API 请求，避免跨域
- 或在 Spring Boot 后端配置 CORS（仅临时方案）

✅ 方式二：通过 Nginx 反向代理 + 静态资源混合（进阶）

如果你希望用同一个域名同时提供前端页面和后端 API（例如：https://yourdomain.com/ 访问前端，https://yourdomain.com/api/... 调用后端），可以这样配置：

Nginx 配置示例：

nginx 复制代码

server {
    listen 80;
    server_name yourdomain.com;
    root /www/wwwroot/yourdomain.com;  # 放 dist 的地方
    index index.html;

    # 静态资源
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 代理 API 到 Spring Boot（假设后端运行在 8080 端口）
    location /api/ {
        proxy_pass http://127.0.0.1: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;
    }
}

💡 注意：Spring Boot 应用需监听 0.0.0.0:8080（或你指定的端口），且防火墙/安全组允许本地回环访问。

🔒 补充建议

HTTPS：在宝塔中可一键申请 Let's Encrypt 证书，提升安全性。
缓存优化 ：可在 Nginx 中为 js/css 设置长期缓存。
部署自动化 ：可结合 CI/CD（如 GitHub Actions + rsync）自动更新 dist。

如果你已经有一个 Spring Boot 项目在运行（比如通过宝塔的「Java 项目」管理器启动），只需确保前端 dist 由 Nginx 托管，并正确处理路由和 API 代理即可。