Vue3+vite+ThinkPHP8 项目，public目录同域，云部署记录

哇哈哈贼甜

已于 2025-06-25 13:48:28 修改

阅读量243

点赞数 5

CC 4.0 BY-SA版权

文章标签： nginx vue.js php

于 2025-06-25 13:46:48 首次发布

本文链接：https://blog.youkuaiyun.com/php_99/article/details/148897138

部署方案

public同域部署：Vue3 打包的dist文件夹部署到ThinkPHP 项目的public运行目录下

这里不介绍宝塔的安装，如不会的童鞋请自己百度，网上有很多教程，本文以aapanel 为例(宝塔国际版)。

详细步骤

1. 新建站点

在这里插入图片描述

2. 清理默认文件

进入网站目录删除默认文件
在这里插入图片描述

3. 上传ThinkPHP代码

将ThinkPHP代码上传至网站根目录

在这里插入图片描述

4. 部署Vue编译文件

将Vue编译好的文件上传至public目录
在这里插入图片描述

将dist 文件放在public下

关键配置（重要）

因为配置问题踩了不少坑，vue与thinkPHP都有路由，如果配置不正确就会出现vue前端无法访问或者可以访问首页，但是访问其他页面之后刷新页面出现404的情况，如配置好之后出现以上情况请认真检查配置是否正确。

在这里插入图片描述

方图片中的几个点事重要的部分一定要配置正确，我的thinkPHP是多应用项目，是管理后台，所以请求路径中带/adminApi是接口请求，把这些请求转发给php处理就可以，这些之外的链接都是前端跳转页面的请求，直接给vue处理即可。我把重定向代码附在页面底部，有需要的童鞋根据自己的实际情况做修改。

Nginx伪静态配置

需正确处理Vue和ThinkPHP的路由冲突：

location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff2) 这个是指向js css文件的路径图片资源根据自己项目的具体情况决定是否保留如果不加这个需要吧dist内部的的css 资源在复制一份出来到public文件内

加粗部分替换成自己的接口代理前缀：

location /adminApi/
rewrite ^/adminApi/(.*)

location / {
  root /www/wwwroot/test.com/public/dist;
  # Vue History 模式支持
  try_files $uri $uri/ /index.html;
}

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
  root /www/wwwroot/test.com/public/dist;
  expires 1y;
  add_header Cache-Control "public";
}

location /adminApi/ {
   # 关键：将所有 /admin-api/ 请求重写到 index.php
    if (!-e $request_filename) {
        rewrite ^/adminApi/(.*)$ /index.php/admin/$1 last;
    }
}