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可以改成其他名字，訪問的時候也需要做相應改動