前面提到的两篇关于项目差异化的文章，其主要目的还是给不同客户提供更好的体验，但是其中还有一个问题没有解决，就是关于项目中一些说大不大说小不小的功能差异，它不体现在页面中而是在一些小组件内，此时，如果把差异代码写在组件内，差异客户一增多，会使得代码到后期越来越难以维护，以及打包代码越来越大的情况。

前言

按照之前的结论，如果使用环境变量在编译时就将项目区分开来的话，只适用于一个场景，那就是客户需要单独部署的时候，如果用户不是单独部署，而是采用我们服务器的同一套代码时，这个方法是无效的。

所以，最终决定的方案：

• 涉及页面的改动：

    *   使用router+vuex+自定义菜单区分。
  

• 涉及组件的改动：

    *   在组件的Components中根据客户的不同加载不同的组件
  

• 涉及组件中不同功能的：

    *   使用mixins，在export default外定义好不同配置，然后将区分代码写在created中。
  

在这里，我们主要讲的是第二点和第三点。

在components中区分组件

场景

有些客户对于页面排版是有要求的，虽然可以在template中使用v-if或v-show是可以实现这样的功能，但是同样，如果多个客户定制多个template，会使得代码很杂，所以这时候就可以直接区分组件。

下面aa和bb就是同一个功能页面的不同布局。

components: {
    Business: function(resolve){
        const USERINFO = window.localStorage.getItem('userinfo');
        const TENANTKEY = JSON.parse(USERINFO).tenant_key;
        if(TENANTKEY) {
            if (TENANTKEY === 'xxxxxxx') {
                require(["@/components/xxx/aa"], resolve);
            }else {
                require(["@/components/xxx/bb"], resolve);
            }
        }else {
            require(["@/components/xxx/bb"], resolve);
        }
   }
}

此时，webpack打包时，会将aa和bb分成两个包，此时更有利于客户端快速加载资源。

弊端

如果需要修改某个功能，要同时修改两个地方。

使用mixins区分组件中的不同功能

const MAP_LIST = {
   default: [
     ['patent', [
       { id: "review_assessment", name: "复审评估" },
     ]],
   ],
   jijia: [
     ['patent', [
       { id: "review_assessment", name: "复审评估" },
       // 不同客户的不同邮件模板
       { id: "send_headquarters", name: "发送连邮件到总所" },
       { id: "send_cpc_headquarters", name: "发送cpc包到总所" },
     ]],
   ]
 }

export default {
  data(){
    return {
      mailMap: null,
    }
  },
  created () {
    const USERINFO = window.localStorage.getItem('userinfo');
    // TENANTKEY之后会用vuex来管理
    const TENANTKEY = JSON.parse(USERINFO).tenant_key;
    if(TENANTKEY) {
      if (TENANTKEY === '7a4c0077f122bf17027d028292963b13') {
        this.mailMap = new Map(MAP_LIST.jijia);
      }else {
        this.mailMap = new Map(MAP_LIST.default);
      }
    }else {
      this.mailMap = new Map(MAP_LIST.default);
    }
  }
}