Vue打包代码如何部署在ThinkPHP项目里

以下基于Vue3.X讲解,Vue2也类似

• 修改src/router/index.js文件，将history模式改成hash模式

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

• 项目根目录执行打包命令

  npm run build

• 打包后得到dist目录，将里面的css、js、img文件夹和index.html文件直接复制到thinkphp的项目根目录，通常叫做public下面。

• 访thinkphp项目的域名后面跟上index.html，可以访问到打包后的前端文件

  index.html可以改成其他名字，访问的时候也需要做相应改动