Vue3+ThinkPHP6前后端分离项目宝塔同域部署

32岁自学前端
358 阅读3分钟

前后端分离项目的同域部署指南

项目背景

  • 后端：ThinkPHP 6.0+

  • 前端：Vue 3

  • 部署环境：宝塔面板

在网上看了好多文章发现都不适合自己，对于新手小白来说他们都讲的不清楚，所以自己记录一下如何部署前后端分离的项目如何同域部署。

简单介绍一下我的前后端项目情况 后端使用的是ThinkPHP 6.0+框架 前端使用的是Vue3 我是用的宝塔部署我的服务，接下来从零开始部署我的服务

一.后端部署

我们先部署后端，把后端部署好再来部署前端，这样就能一步一步排除问题。

image.png

2.选择自己的php版本 3.将自己的后端代码上传到网站目录中，然后运行目录选择public

image.png 4.配置thinkphp的伪静态，这里插个题外话，因为我刚开始做后端，所以对宝塔里面的这两个按钮很疑惑，到底是在伪静态里面写重写规则，还是在配置文件中配置呢，这个问题一度让我难受了很久，网上搜了也是一知半解，后面通过咨询大佬才知道这两个的区别，那么我们来详细了解下：

二. Nginx 配置说明

在配置 Nginx 之前，需要理解宝塔面板中"伪静态"和"配置文件"的区别：

伪静态按钮方式

  • ✅ 更简单直观，适合新手使用

  • ✅ 提供常用框架预设规则

  • ✅ 修改后自动重载配置

  • 📝 实际修改 rewrite/网站名/*.conf

配置文件方式

  • ✅ 直接修改 Nginx 配置文件，更灵活

  • ✅ 可以配置更复杂的规则

  • ⚠️ 需要手动重启 Nginx

  • ⚠️ 修改有风险，需谨慎

 加载顺序：

server { # ... 其他配置 ...

   # 伪静态按钮添加的规则（后加载）
   include rewrite/gm.jxgzsfybjy.cn/*.conf;
   
   # 直接在配置文件中的规则（先加载）
   location / {
       try_files $uri $uri/ /index.html;
   }

}

image.png

三.ThinkPHP 路由配置

我们直接在配置文件中添加thinkphp的伪静态。这里需要注意一下，如果使用/api前缀，那么你后端代码的路由上必须使用api前缀，才能够对应上，不让访问会404，我之前就卡在这里好久。

 location /api {
        if (!-e $request_filename) {
            rewrite  ^(.*)$  /index.php?s=$1  last;
        }
    }

image.png

四.前端部署

配置完后端后浏览器或者postman上访问api看看有没有问题，没问题就来部署前端，首先前端项目npm run build打包文件生成一个dist文件夹，把dist文件夹复制放到后端代码的public目录下。

image.png

五.前端静态文件配置

然后在配置文件中加入规则，加入规则后重启nginx，然后访问你的地址就行了。终于完成了前后端项目分离的部署工作，是不是很简单？

 # 前端静态文件配置
    location / {
        root   f:/wwwroot/gm.jxgzsfybjy.cn/public/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

完整配置参考

注意别乱复制哦，里面的域名根据你自己的来

server {
    listen 6213;
    server_name your_domain;
    index index.php index.html index.htm default.php default.htm default.html;
    root f:/wwwroot/your_domain/public;
    
    # API 路由配置
    location /api {
        if (!-e $request_filename) {
            rewrite  ^(.*)$  /index.php?s=$1  last;
        }
    }
    
    # 前端静态文件配置
    location / {
        root   f:/wwwroot/your_domain/public/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # PHP 配置
    include php/82.conf;

    # 其他标准配置
    include rewrite/your_domain/*.conf;
    include proxy/your_domain/*.conf;
    include redirect/your_domain/*.conf;

    # 日志配置
    access_log  F:/BtSoft/wwwlogs/your_domain.log;
    error_log   F:/BtSoft/wwwlogs/your_domain.error.log;
}

部署检查清单

  • 后端 API 能否正常访问（使用 Postman 或浏览器测试）

  • 前端页面是否正常加载

  • 路由跳转是否正常

  • API 请求是否成功

常见问题

  • 404 错误：检查 API 前缀是否匹配

  • 跨域问题：确认 Nginx 配置是否正确

  • 路由问题：检查 try_files 配置

通过以上步骤，你就可以完成前后端分离项目的同域部署了。如果遇到问题，建议按照检查清单逐步排查。

avatar
文章
阅读
粉丝