首先，我们需要在服务器上搭建好环境，包括PHP、MySQL、Composer、Node.js等。接着，我们使用Composer安装ThinkPHP，使用Vue CLI创建一个新项目。

# 安装ThinkPHP
composer create-project topthink/think tp5
# 安装Vue CLI并创建新项目
npm install -g vue-cli
vue init webpack vue-demo
然后，我们将Vue项目中的所有文件复制到ThinkPHP项目的public目录下。这一步非常重要，因为Vue是前端框架，需要在浏览器中运行，而ThinkPHP则是后台框架，需要在服务器端运行。将Vue项目复制到public目录下可以保证浏览器可以访问到Vue的所有文件。

cp -r ./vue-demo/* ./tp5/public
接下来，我们在ThinkPHP项目中新建一个控制器，并添加一个方法，用来渲染Vue的首页。在这个方法中，我们使用ThinkPHP的模板引擎来渲染Vue的模板文件，同时还需要引入Vue的js和css文件。

PHP
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
public function index()
{
$this->assign([
‘title’ =>’Vue Demo’,
‘style’ =>’/static/css/app.2f17719c.css’,
‘script’ =>’/static/js/app.060c72d0.js’
]);
return $this->fetch(‘index’);
}
}
最后一步，我们需要在Vue项目中修改配置文件，将API请求的地址改为当前服务器的地址。这样可以确保Vue项目能够访问到我们创建的接口，从而完成数据的交互。

Js
// config/index.js
module.exports = {
// …
dev: {
// …
proxyTable: {
‘/api’: {
target: ‘http://localhost:8000’, // 将这里的地址改为你的服务器地址
changeOrigin: true
}
}
},
// …
}
至此，我们完成了ThinkPHP和Vue的部署。你可以使用浏览器访问http://你的服务器地址，应该能够看到Vue的首页。

总结：

其中，admin、api、index分别为后台、api接口、前端应用，我们希望在admin应用中，直接渲染使用vue生成的后端管理界面。

此时，在服务器端，如果我们直接将生成的文件放在这个目录下，会显示空白（实际是文件路径找不到）。此时，我们可以通过手动修改文件路径的方式进行修改，但是每次重新打包后，都需要修改，是非常麻烦的一件事。

当然，有的开发者，直接在服务器端为后台新建一个项目（比如在宝塔面板添加后台为独立站点），其实这样也是可以达到访问的效果的，但是这样的缺点是会让服务器端比较乱。当然这么做有一个好处是，可以省去购买通配符ssl的费用，可以为每个二级域名分别申请免费的ssl证书。但是这么做还是不够优雅。

经过摸索，我们的经验是：将vue项目放置在网站根目录，然后vue打包编译后的代码生成至thinkphp的public目录下，这样可以保证静态资源的路径不发生变化。然后再通过admin的控制器，去渲染public目录下的index.html文件作为模板文件。以下是实现代码细节：

一、修改vue配置文件：vite.config.js文件

//  vite 打包配置
build: {
    outDir: '../public', // 将文件打包至 public目录
    assetsDir: 'assets',


    //自定义底层的 Rollup 打包配置
    rollupOptions: {
        output: {
            chunkFileNames: 'assets/js/[name]-[hash].js',
            entryFileNames: 'assets/js/[name]-[hash].js',
            assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        },
    },
    // 在构建时不清空目录，否则会清空public目录下的其他文件
    // emptyOutDir: false,

}

当然，你还可以添加一些其他的配置，关于vite的打包，有很多配置项，以上仅列出足够实现本文主旨需求的代码。

使用命令`npm run build`进行项目打包编译，会将文件直接生成在thinkphp的public目录下，会生成一个assets文件夹及一个index.html文件，index.html就是我们稍后要使用到的模板文件，assets文件为需要用到的所有资源。

二、在admin应用下，添加控制器IndexController.php，并编写如下代码：

public function index()
{
    return View::fetch(root_path() . 'public/index.html');
}

即：整个admin应用中，我们无需写过多的代码，所有的业务都交给vue去处理。

通过如上操作，我们即可将vue编写的项目和thinkphp框架，进行完美整合。相对于为后台新建独立站点的部署方法，这种方式更加优雅，且在编码时，也可以不用来回切换编辑器，会更加高效一些。