Thinkphp6 框架中部署vue项目

记录在thinkphp 框架中部署vue项目的过程

话不多说，让我们直接开始

1、前端修改打包配置（vue端）

我使用的是 vue3+webpack  所以打包配置修改位置在根目录的 vue.config.js

使用其他脚手架的朋友请对比参考

module.exports = defineConfig({

    ...

    // 基本路径   整个文件夹在哪
    publicPath: '/dist/',
    // 输出文件目录   文件夹名
    outputDir: 'dist',
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。    资源放的目录
    assetsDir: "./static",
    productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度

    ...
})

其中最主要的是  设置 打包的基本路径  publicPath 参数，它影响的是  打包后  在index.html 中 引用资源的路径  经过我们这样配置后   它的引用地址就会变成 src="/dist/static/xxxx.js"

至此，前端的配置已经完成，   直接调用  npm run  build 进行完成打包吧

2、后端的代码编写(Thinkphp端)

我用的是thinkphp6 多应用模式，基本的目录结构如下

        眼尖的小伙伴会发现 我的入口目录 public下 多了一个 dist 的文件夹，是的 这就是我们vue打包好的文件目录，我将其移动到public 下了，因为 thinkphp 框架为了项目安全，资源文件只有在public目录下才能访问

        我在index应用下 创建了 index 控制器，然后 增加了 main的方法

class Index extends Controller
{
    // vue 访问方法
    public function main(){
        // ... 其他操作
       return $this->fetch(ROOT_PATH.'/public/dist/index.html');
    }
}

 在main 方法中， 我们只需要设置指定的模版指向到public/dist/index.html  也就是我们的打包后的vue 根目录index.html 即可 （ROOT_PATH 是我声明的项目入口路径，也就是 thinkphp 的根目录）

3、至此，我们已经完成了 在thinkphp 框架中 部署vue项目的全部过程，用该方法部署vue 项目的好处在于，  前后端在同一个域名下，无需增加 跨域请求，当然，缺点也是用的，如果项目的访问请求量大， 前后端 进行分离  分别部署 会是更好的方案

        在个人开发时，或者项目较小，该部署方式会较为适合