小编Ale*_*cun的帖子

我正在 VueJS 2（和 Vue-CLI 3）中创建一个前端项目，它将被不同的客户端使用，我希望能够基本上导入我需要的所有内容（JS 文件，如 mixin 和组件代码以及 CSS/LESS 文件) 在 webpack 构建过程中，基于将存储在以下位置的 CID 参数化：1) Vue .env 文件或 2) webpack 配置文件中的某处或 3) 作为参数传递给npm run watchand npm run build。

我已经搜索了许多解决方案（Webpack 插件等），但它们都不是简单或优雅的，也不是我真的能够理解 Webpack 的内部工作以实现这些解决方案，而且大多数都与动态加载有关，而不是动态构建过程。

不同的客户端需要不同的代码和样式，例如：

<template>...</template>
<script src="./component-code.js"></script>
<style src="@/styles/component-style.less"></style>

这些路径需要按照以下方式转变为：

<template>...</template>
<script src="./CLIENTID/component-code.js"></script>
<style src="@/styles/CLIENTID/component-style.less"></style>

...以便 Webpack 可以CLIENTID在编译时使用真实文件夹名称替换这些引用，无论这些名称可能是什么。这也必须适用于任何其他文件路径（例如，当使用类似 的语句时import something from "./path/CLIENTID/to/file";）。

将此类变量注入构建过程的最简单解决方案是什么？谢谢！

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

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

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

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

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

1. 将所有内容保存在一个 Git 存储库中。
2. 在它自己的分支上开发 CMS，并只在该分支上开发后端和后台的东西，它是子级。
3. 为不同的最终用户前端创建单独的分支（将多个项目放入 git 存储库的最佳实践是什么？也许这里介绍的一些解决方案？），并仅在这些分支上开发最终用户前端。
4. 在每个版本上将 CMS 分支合并到客户端分支中。

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

对我们来说，什么才是最好的建筑解决方案？