背景
一般来说,SaaS 服务商提供的是标准化的产品服务,体现的是所有客户的共性需求。然而,部分客户(尤其是大客户),会提出功能、UI 等方面的定制需求。针对这些定制需求,大体上有两个解决方案。
第一个方案是提供应用程序 SDK,由客户的开发团队完成整个定制应用的开发和部署,SaaS 服务商提供必要的技术支持即可。此方案要求客户的开发团队具备较强的 IT 专业能力。
第二个方案则是由 SaaS 服务商的开发团队在 SaaS 应用的基础上进行二次开发,并部署。此方案主要面向 IT 专业能力较弱,或者仅需在 SaaS 应用的基础上进行少量定制的客户。然而,要支持这种定制方式,相当于要求 SaaS 服务商在同一个应用中,针对不同的客户运行不同分支的代码。要达到这个目的,应用程序的架构也要进行相应的改造。本文主要讲述改造的方案及其代码实现。
方案概览
对于前后端分离的项目来说,经过构建,最终会生成 html、js、css 三种代码文件。以基于 Vue.js 框架的项目为例,其构建出来的 index.html,内容与下面的代码相似:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.my-app.net/sample/assets/css/chunk-0c7134a2.11fa7980.css" rel="prefetch">
<link href="https://cdn.my-app.net/sample/assets/js/chunk-0c7134a2.02a43289.js" rel="prefetch">
<link href="https://cdn.my-app.net/sample/assets/css/app.2dd9bc59.css" rel="preload" as="style">
<link href="https://cdn.my-app.net/sample/assets/js/vendors~app.f1dba939.js" rel="preload" as="script">
<link href="https://cdn.my-app.net/sample/assets/js/app.f7eb55ca.js" rel="preload" as="script">
<link href="https://cdn.my-app.net/sample/assets/css/app.2dd9bc59.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.my-app.net/sample/assets/js/vendors~app.f1dba939.js"></script>
<script src="https://cdn.my-app.net/sample/assets/js/app.f7eb55ca.js"></script>
</body>
</html>
实际上,index.html 只是访问入口,主要作用就是加载 css 和 js 资源。换句话说:任何的 html 页面,只要加载了上述 css 和 js 资源,都可以运行这个应用。