使用thinkphp框架和vue框架时，服务器端（宝塔面板等）部署方法

thinkphp和vue分别是后端和前端目前比较流行的框架，很多使用api接口开发网站系统的程序员们都使用这种组合，一般我们使用thinkphp来编写api接口，用vue制作网站后台管理系统的界面。在服务器端部署时，有很多方案，今天分享一种我们常用的优雅的实现方案。

首先，先composer安装thinkphp框架，安装完成后，我们需要安装并启用多应用插件。此时，我们的app目录结构一般如下：

其中，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框架，进行完美整合。相对于为后台新建独立站点的部署方法，这种方式更加优雅，且在编码时，也可以不用来回切换编辑器，会更加高效一些。