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

vue打包后在dist文件夹里有index.html和static文件夹，如果把这两个文件直接放到服务器根目录下，是不会有问题的。但是，如果放到不是根目录的其他路径，都会报错。比如放到thinkphp的view目录下。这是因为打包后的静态文件是相对当前url的。

公司开发过程中，遇到一个需要把vue-cli的小项目，打包部署在thinkphp的控制器模板文件下，作为入口。

方法1：

需要把vue路由从history模式改为hash模式，即可解决后端路由和vue路由冲突，刷新后vue页面正常

url格式就会是域名/控制器/模板（如：index）/#/
tp端 controller 控制器，新建 diyPageController.php 文件

<?php

namespace HomeController;

use ThinkController;

class DiyPageController extends FormBaseController
{
    public function index()
    {
        $this->display('index');
    }
}

对应模板文件，放入打包后的文件，作为入口

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link rel="icon" href="/assets/diypage/favicon.ico" />
    <title>{$pageTitle}</title>
    <link
      href="/assets/diypage/css/chunk-vendors.3bdbd2e4.css"
      rel="stylesheet"
    />
    <link href="/assets/diypage/css/app.c7872c12.css" rel="stylesheet" />
  </head>
  <body>
    <noscript
      ><strong
        >We're sorry but diyform doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      ></noscript
    >
    <div id="app"></div>
    <script
      defer="defer"
      src="/assets/diypage/js/chunk-vendors.1f1fa155.js"
    ></script>
    <script defer="defer" src="/assets/diypage/js/app.2f916d84.js"></script>
  </body>
</html>

hash模式，优势就是不会和tp路由产生冲突，只需要吧index.html 作为程序的入口文件即可

方法二：

如果想用history 模式也可以的

但是需要配置好vue-router下面的Base。Base 需要为你在tp端的文件路径。

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

import diyIndex from '@/pages/setting/diyIndex';
import index from '@/pages/setting/index';
const router = new Router({
  mode: 'history',
  base: '/order/home/DiyPage/', //base 此处要配置为tp端的路由路径
  routes: [
    // 路由列表，里面的每一个成员都是一个url地址和组件的映射关系
    {
      path: '/',
      name: 'index',
      meta: { title: '1v1预约咨询' },
      component: index,
    },
    {
      path: '/index',
      name: 'index',
      meta: { title: '1v1预约咨询' },
      component: index,
    },
    {
      path: '/diy',
      name: 'diyindex',
      meta: { title: '表单diy工具' },
      component: diyIndex,
    },
    {
      path: '/order/home/DiyPage/diy',
      name: 'diyindex',
      meta: { title: '表单diy工具' },
      component: diyIndex,
    },
  ],
});

export default router;

域名/order/home/DIyPage/index.html 这个时候访问路径默认会展示vue-cli里面的默认组件。

如果想访问路由/diy 的内容呢？需要在tp端controller 多声明一个方法，模板指向index.html 入口文件（与默认index方法一样）

<?php

namespace HomeController;

use ThinkController;

class DiyPageController extends FormBaseController
{
    public function index()
    {
        $this->display('index');
    }
    public function diy()
    {
        $this->display('index');
    }
 }

这个时候就可以通过域名/order/home/DiyPage/diy.html 访问到 /diy 路由下的内容了。