前端微服务架构1-搭建项目

公司项目老旧，迭代时间过久，迭代人员水平一般的情况下还有添加新模块怎么办？

这几天尝试了一下开源的微服务架构，

目前网上有两种开源框架：

1、蚂蚁的qiankun目前15.1k

2、京东的micro-app目前4.9k点赞，

前者的点赞量在github上更高，所以我选择了前者

搭建也不是很难，主要是遇到的一些坑的解决

主项目的配置

1、npm i qiankun -S 

2、main.js中添加如下配置

var apps = [
    {
        name: 'cw-wfw1',    //子项目名
        entry: '//localhost:10001',   //子项目的ip和端口
        container: '#wfw1',
        activeRule: '/compliancePromotion',   //子项目的路由
        props: { 
            // routerBase: "/compliancePromotion"  //给子项目传值
        }
    },
];
registerMicroApps(apps, { //子项目的注册及其生命周期
    beforeLoad: app => {
        //app.props.menu = menu;  //也可以在这里给子项目传值，当前我把子项目动态的菜单传给了子项目
        console.log('before load app.name====>>>>>', app)
    },
    beforeMount: [
        app => {
            console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name)
        }
    ],
    afterMount: [
        app => {
            console.log('[LifeCycle] after mount %c%s', 'color: green;', app.name)
        }
    ],
    afterUnmount: [
        app => {
            console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name)
        }
    ]
})
start({
    // 开启
    // prefetch: false, // 取消预加载
});

子项目的配置

1、在子项目main.js同级添加public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

2、main函数的修改：引入 import './public-path'

function render(props = {}) {   //重写render函数
  const { container, routerBase } = props
  const router = new VueRouter({
    // base: window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL,
    mode: 'history',
    routes
  })

  instance = new Vue({
    router,
    store,
    render: (h) => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

if (!window.__POWERED_BY_QIANKUN__) {    //当前可以判断是独立运行还是在qiankun环境运行
  // 这里是子应用独立运行的环境，实现子应用的登录逻辑

  // 独立运行时，也注册一个名为global的store module
  // commonStore.globalRegister(store)
  // 模拟登录后，存储用户信息到global module
  const userInfo = { name: '我是独立运行时名字叫张三' } // 假设登录后取到的用户信息
  store.commit('global/setGlobalState', { user: userInfo })

  render()
}

export async function bootstrap() {   //初始化执行，只会执行一次
  console.log('[vue] 子应用初始化')
  store.dispatch("getDataDict")
}

export async function mount(props) {   //进入子应用就会执行，参数是父应用传的值
  console.log('[vue] props from main framework', props)
  var { menu } = props;
  store.commit('setMenu', menu);  //可以把父应用传的值存入vuex
  // commonStore.globalRegister(store, props)

  render(props)
}

export async function unmount() {  //跳出子应用就会执行
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
}