...在Vue-cli3.X环境下，基于同类型的activity，可以复用多个页面，可以在common中为每个activity创建大部分组件后台多处理方式一个分支维护在不同的分支上。如果需要维护复用的代码，可以选择一个分支进行修改，通过gitcherry-pick进行并行迁移。Monorepo处理方式只是在同一个分支下维护多个项目，解构各个功能模块，通过项目配置项进行个性化配置。目录结构|-src|-views|-index.js//通用页面统一入口|-公司|-index.vue//通用页面公司结构、风格、逻辑|-index.js//公司页面路由|-Rule|-index.vue|-index.js|-components|-core|-instance//链接到应用程序实例的方法|-libs//与应用程序实例无关的方法|-assets|-images|-fonts|-store|-index.js//通用状态|-types.js//事件类型|-config|-proA.js//项目资源配置|-proB.js|-projects//项目自定义资源|-proA|-TheproB不同项目的区别完全在于config/文件的配置和projects/下的项目定义；同一级别的其余目录对所有项目都是通用的。提取公共页面&路由公共页面示例：//src/views/Company/index.vue......publicpageroute//src/views/Company/index.jsexportdefault[{path:'/company',name:'company',component:()=>import(/*webpackChunkName:"company"*/'./index.vue'),meta:{title:'公司简介'}}]公共页面统一入口//src/views/index.jsexport{defaultascompanyRoute}from'./Company/index.js'export{defaultasruleRoute}from'./Rule/index.js'自定义项目公共页面//src/config/proA.jsimport{companyRoute,ruleRoute}from'../views/index.js'...exportconstlogoUrl=''//也可以自定义其他内容exportconstroutes=[...companyRoute,...ruleRoute]在项目中使用公共页面以src/projects/proA为例：目录结构|-assets|-components|-mixins|-router|-store|-pages|-App.vue|-main.js项目主路由//src/projects/proA/router/index.jsimportVuefrom'vue'importRouterfrom'vue-router'import{routes}from'../../config/proA'importHomefrom'../pages/Home'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',redirect:'/home'},{path:'/home',name:'home',component:Home,meta:{title:''}},...routes]})其中：home/index.vue是自定义的状态管理multi-item是独立运行的，状态提取不会干扰每一个other，如果同时运行多个项目，一般状态会被修改。一般状态提取//src/store/index.jsimporttypesfrom'./types'exportconstinitialState={userInfo:{},...}exportfunctiongetGetters(store){return{userId:()=>store.userInfo.userID,...}}exportfunctiongetMutations(store){return{[types.INITIALMUTATIONTYPES.USER_INFO](val){store.userInfo=val},...}}添加到config/proA.js文件中：...export*from'../store/index.js'export*from'../store/types.js'...项目中使用了小项，项目的主要状态使用定义vue.observable管理状态admin//src/projects/proA/store/index.jsimportvuefrom'vue'import{initialState,getGetters,getMutations}from'../../../config/proA'exportconststore=vue.observable({...initialState,customState:'',//项目私有状态...})store._getters={...getGetters(store),customGetter(){//项目私有返回store.customState},...}store._mutations={...getMutations(store),...//项目私有}exportconstmutation={...getMutations(store),...//项目私有}定义辅助方法mapGetters复制vuex部分代码到src/core/libs/helpers.jsexportconstmapGetters=(getters)=>{constres={}if(!isValidMap(getters)){console.error('[view]mapGetters:mapper参数必须是forEach(({key,val})=>{res[key]=functionmappedGetter(){if(!(valinthis.$store._getters)){;console.error(`[view]unknowngetter:${val}`)return}returnthis.$store._getters[val]()}})returnres}exportfunctionnormalizeMap(map){if(!isValidMap(map)){return[]}returnArray.isArray(map)?map.map(key=>({key,val:key})):Object.keys(map).map(key=>({key,val:map[key]}))}exportfunctionisValidMap(map);{returnArray.isArray(map)||isObject(map)}exportfunctionisObject(obj){returnobj!==null&&typeofobj==='object'}in/src/core/libs/index.jsdefault:export*from'./helpers';*.views//src/projects/proA/pages/Home/index.vue组件管理组件统一入口使用webpack的require.context方法集成/components/下的组件constret={}constrequireComponent=require.context('./',//指定递归文件目录true,//是否递归文件子目录/[A-Z]\w+\.(vue)$///登陆文件)requireComponent.keys().forEach(fileName=>{constcomponentConfig=requireComponent(fileName)constcomponent=componentConfig.default||componentConfigconstcomponentName=component.name||fileName.split('/').pop().replace(/\.\w+$/,'')//ret[componentName]=()=>requireComponent(fileName)ret[componentName]=component})exportdefaultret定义布局配置//config/proA.jsappend...exportconstlayouts={Home:[{componentType:'CompA',request:{fetch(){constres=[]returnres}},response:{filter(res){return[]},effect(){}}},{componentType:'CompB'},{componentType:'CompC'},{componentType:'CompD'}]}ProA用于项目/Home/index.vue......参考文档不同环境下Vue打包命令配置：大部分内容源使用MonoRepo管理前端项目
