记录在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 项目的好处在于,  前后端在同一个域名下,无需增加 跨域请求,当然,缺点也是用的,如果项目的访问请求量大, 前后端 进行分离  分别部署 会是更好的方案

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

Logo

前往低代码交流专区

更多推荐