【架构】thinkphp前后端分离项目中的前端配置

技术栈：thinkphp6、vue

前端代码打包后放在public目录下，需要使用框架的路由规则来展示前端页面。

单应用模式

目录

├─app 应用目录
│  ├─controller         控制器目录
│  ├─model              模型目录
│  ├─view               视图目录
│  └─ ...               更多类库目录
│
├─public                WEB目录（对外访问目录）
│  ├─admin         			管理后台
│  │  └─index.html          管理后台
│  ├─mobile   	      		手机端
│  │  └─index.html          手机端入口
│  ├─pc                     PC端
│  │  └─index.html          PC端入口
│  ├─index.php          入口文件
│  ├─router.php         快速测试文件
│  └─.htaccess          用于apache的重写
│
├─view                  视图目录
├─config                应用配置目录
├─route                 路由定义目录
├─runtime               应用的运行时目录

方案1：普通路由

域名入口

public function index()
{
    $template = app()->getRootPath() . 'public/pc/index.html';
    if (Request::isMobile()) {
        $template = app()->getRootPath() . 'public/mobile/index.html';
    }
    if (file_exists($template)) {
        return view($template);
    }
    return '你好';
}

路由配置

// 管理后台
Route::rule('admin/:any', function () {
    return view(app()->getRootPath() . 'public/admin/index.html');
})->pattern(['any' => '\w+']);

// 手机端
Route::rule('mobile/:any', function () {
    return view(app()->getRootPath() . 'public/mobile/index.html');
})->pattern(['any' => '\w+']);

// PC端
Route::rule('pc/:any', function () {
    return view(app()->getRootPath() . 'public/pc/index.html');
})->pattern(['any' => '\w+']);

方案2：强制路由

在路由配置文件中设置

return [
    // ...
    'url_route_must'		=>  true,
];

路由配置

Route::group('/', function () {
    // 管理后台
    Route::group('admin', function () {
        return view(app()->getRootPath() . 'public/admin/index.html');
    });
    Route::miss(function() {
        if (!request()->isMobile() && is_dir(app()->getRootPath() . 'public/pc')) {
            return view(app()->getRootPath() . 'public/pc/index.html');
        } else {
            return view(app()->getRootPath() . 'public/mobile/index.html');
        }
    });
});

注册一个单独的MISS路由可以在没有匹配到所有的路由规则后执行。一旦设置了MISS路由，相当于开启了强制路由模式。

多应用模式

如果采用的是多应用模式，每个应用的路由都是完全独立的，并且路由地址不能跨应用（除非采用重定向路由）。

├─app 应用目录
│  ├─index              主应用
│  │  ├─controller      控制器目录
│  │  ├─model           模型目录
│  │  ├─view            视图目录
│  │  ├─config          配置目录
│  │  ├─route           路由目录
│  │  └─ ...            更多类库目录
│  │ 
│  ├─admin              后台应用
│  │  ├─controller      控制器目录
│  │  ├─model           模型目录
│  │  ├─view            视图目录
│  │  ├─config          配置目录
│  │  ├─route           路由目录
│  │  └─ ...            更多类库目录
│
├─public                WEB目录（对外访问目录）
│  ├─admin         	    管理后台
│  │  └─index.html      管理后台入口
│  ├─mobile   	        手机端
│  │  └─index.html      手机端入口
│  ├─pc                 PC端
│  │  └─index.html      PC端入口
│  ├─admin.php          后台入口文件
│  ├─index.php          入口文件
│  ├─router.php         快速测试文件
│  └─.htaccess          用于apache的重写
│
├─config                全局应用配置目录
├─runtime               运行时目录
│  ├─index              index应用运行时目录
│  └─admin              admin应用运行时目录

参考文档：路由定义、变量规则、路由分组、MISS路由