记录在thinkphp 框架中部署vue项目的过程
话不多说，让我们直接开始
前端修改打包配置（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 进行完成打包吧
后端的代码编写(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 的根目录）
至此，我们已经完成了 在thinkphp 框架中 部署vue项目的全部过程，用该方法部署vue 项目的好处在于， 前后端在同一个域名下，无需增加 跨域请求，当然，缺点也是用的，如果项目的访问请求量大， 前后端 进行分离 分别部署 会是更好的方案
在个人开发时，或者项目较小，该部署方式会较为适合
来源地址：https://blog.csdn.net/weixin_51224282/article/details/128380242
