vue项目中动态创建模块以满足客户定制化需求的解决方案

前端项目中很多时候会遇到这样的业务需求：

• 所有的客户都有共同的一些业务需求，即基础需求
• 基础需求需要根据业务发展进行升级
• 在共同需求的基础上，每个客户又有不同的需求（客制化）

如果只是一两个客户还好，在基础版本上分两份前端文件，分别维护。但是客户达到一定数量级后，比如5个、8个甚至更多，这时候这种机械的本办法就费时耗力了，如果再考虑到基础功能的版本升级需求，那这种方法就完全不行了（升级一个基础功能就要分别复制到每个客户的项目中，同步代码）。

以上情况就是我司的实际情况，下面介绍一下我司用的方法，不一定是最好的解决方案，如读者有更好的方法，欢迎留言交流。

• 针对第一点，首先根据产品对行业的需求了解，指定出基础版本的功能，基础功能涵盖大部分客户的最基本需求，开发出一套前端对应的版本，即基础版。
• 针对第二点，借助git版本管理工具，每次大的升级都创建一个分支，基础版为1.0.1，升级版本后，历史版本便封版，不再做改动（bug除外），后续可以根据客户对基础功能的需求决定在哪个版本的基础上做定制化开发。
• 针对第三点，客制化开发主要通过前端动态生成vue组件统一放到一个文件里的方式满足，也是本文的重点。

思路：通过node动态创建默认路由文件和路由所需的组件列表文件

在package.json的script的dev和build命令中配置CLIENT字段标识当前启动项的客户，如果不加CLIENT字段则视为标准版本开发或构件

启动项目的时候同时运行指定js文件buildViews.js，该文件负责动态生成后续router需要的文件

buildViews.js中通过CLIENT字段拉取对应的客户路由配置文件./anxin/index，和标准文件的模块进行对比，以客制化文件为准，覆盖、替换或删除标准文件里的模块，组合为新的路由数据

"scripts": {
        "serve": "vue-cli-service serve",
        "buildViews": "node build/buildViews.js",
        "buildViews:landq": "cross-env CLIENT=landq node build/buildViews.js",
        "dev": "npm run buildViews && npm run serve",
        "dev:landq": "npm run buildViews:landq && npm run serve",
        "build": "npm run buildViews && vue-cli-service build",
        "build:landq": "npm run buildViews:landq && vue-cli-service build",
        "lint": "vue-cli-service lint"
    },

通过node命令fs.writeFile()使用对比更新后的配置数据，在指定文件夹下创建后续路由所需要的的视图模块文件，动态生成的文件大致长这样

const Home = resolve => require(['view/home/index'], resolve);
、、、、、

export {
    Home,
    、、、
}

下面来看具体代码层面的实现

首先安装依赖json-templater/tring用于生成文件模板，chalk用于在控制待打印信息，cross-env用于设置客制化信息

目录结构：

这是初始的目录结构，client专门存放客制化的路由文件：客户landq和anxin，比如版本信息和info.js、用于生成路由的index.js，standerd文件夹存放标准版本的相关信息；buildViews.js用于动态创建路由数据

先在info.js中把客户名、版本信息等添加上

standerd/info.js

module.exports = {
    clientName: 's