Laravel + Vue 前端解耦与可选的服务器端 Blade 渲染

Question

假设有一个用 Laravel 制作的 CMS。我们将为不同的客户提供相同的 CMS，在我们创建的每个版本上升级他们的 CMS，但有一个配置文件来定义每个客户可用的功能。整个后台（管理面板等）大部分是静态的，并且仅将 Vue 用于某些动态元素。该解决方案适合我们的后端需求。

但是，我们计划为每个客户端部署不同的最终用户前端。解耦这些听起来很简单（创建一个完全独立的前端项目并使用 API 端点来动态获取和渲染所有内容）但是如果我们要完全解耦前端和后端，我们将失去使用 Laravel Blade 渲染静态页面的能力，我们需要由于渲染速度、加载时间、搜索引擎优化等原因，该功能适用​​于某些页面。

主要问题是：如何在不失去使用 Laravel 和 Blade 渲染页面的能力的情况下，将每个客户端的前端与后端解耦，同时保持开发和测试的简单性？

我想到的一个解决方案是创建一个构建后步骤，我们将在该步骤中将特定于客户端的前端文件“合并”到 CMS 中，但这会使开发过程变得非常困难，甚至会全部完成几乎不可能开发和测试。

我想到的第二个解决方案是：

1. 将所有内容保存在一个 Git 存储库中。
2. 在其自己的分支上开发 CMS，并仅在该分支及其子分支上开发后端和后台的东西。
3. 为不同的最终用户前端创建单独的分支（What's the best practice for putting multiple projects in a git repository? 可能是这里介绍的一些解决方案？）并仅在这些分支上开发最终用户前端。
4. 在每个版本中将 CMS 分支合并到客户端分支中。

这个解决方案看起来是可行的，可以让我们使用 Laravel Mix 和服务器端渲染，但它很容易出现人为错误，而且一段时间后我们很难跟踪这些分支。我读过的其他潜在解决方案之一是使用 Git 子模块，但我只是很难理解它是如何工作的，而且它似乎不像在这个用例中那样灵活。

什么才是对我们来说最好的架构解决方案？

Answer 1

我会将您的 CMS 视为一个包，并将您的不同前端部分视为单独的项目，每个项目都依赖于您的 CMS。例如，我在许多项目中使用 Backpack for Laravel：https://github.com/Laravel-Backpack/CRUD，我认为这与您所描述的类似 - 一组通用的核心功能和一个非主流的前端。

Laravel 包可以注册路由、发布视图和资产、拉入迁移等 - 实际上你在 Laravel 应用程序中可以做的任何事情都可以通过 composer 包来完成。

因此，您将获取在构建之间重复的功能，并将其提取到可以通过 composer 需要的“核心”包中。然后前端的东西可以构建在只需要你的核心代码库的项目中。当你更新你的主核心包时，你可以进入每个前端构建并通过 composer 拉入新版本的核心。这将使您有机会将新的核心版本一个一个地推广到每个项目，确保您可以单独解决问题或适应这些项目的重大更改。

您的核心包还可以包含在您的客户端项目中经常重复使用的任何前端组件，因此理想情况下您不会在前端项目之间重新编写任何代码。

使核心代码足够模块化成为一个独立的包可能具有挑战性，但我认为根据我对您项目的了解，这是最有意义的。希望对您有所帮助。

Answer 2

当您解耦您的系统时，我强烈建议不要选择最简单的解决方案，除非首先保证它可以扩展并且（您担心的一个问题是）易于测试。

我们将您的核心产品称为 CMS vanilla，它按预期和设计的方式工作。现在你有了 CMS Chocolate，它在前端略有不同，这就是我所做的：

• 将 UI 主题（模板文件、图像、js、css 等）保存在一个存储库（即 yourcompany/cms-front）中，每个版本都保存在自己的分支中（v-vanilla、v-chocolate、v-strawberry） )
• 在您的 UI 主题中，您需要包含一个简单的 composer.json 文件来描述项目
• 在您的 CMS 项目中，为每个版本指定其自己的分支，并强制版本名称与其对应的布局名称匹配。
• 在您的 cms composer.json 中引用您的前端存储库，我假设我们在这里讨论的是私有存储库，否则不需要下一行。

{ "repositories": [ { "type": "vcs", "url": "git@github.com:your-company/cms-front.git" } ], "config": { "github-oauth": { "github.com": "******" } } }

• 将 yourcompany/cms-front@dev-$version 依赖项添加到您的作曲家。

composer require yourcompany/cms-front@dev-chocolate

• 您需要一个后期构建步骤才能从 vendor/your-company/cms-$version 复制到您的项目，但这很容易

{ "scripts": { "sync-theme": [ "cp -r vendor/your-company/cms-front/resources app/resources", "cp -r vendor/your-company/cms-front/public app/public", ], "post-install-cmd": [ "@sync-theme" ], "post-update-cmd": [ "@sync-theme" ] } }

• 在您的作曲家依赖项中添加 yourcompany/cms-front@dev-$version。

• 随时切换主题。