vue接入微前端无界框架总结

写在前面：
这里就不介绍为什么使用微前端，真正做前端同学应该都知道的。本文主要是做个总结我在公司项目中实际使用微前端，项目已经在公司生产上运行了4个月左右了，目前没有发现什么问题，在此记录下，方便以后在使用的时候忘记。
我在项目中使用的是无界微前端框架来做的。关于无界的介绍和使用可以去无界官网文档、github地址、官网demo
查看研究。

一、安装(主应用)

在主应用中安装无界，我主使用的vue2项目，所以安装的是wujie-vue2版本的，其他前端框架(react)可以去无界文档找对应的版本安装

npm install wujie-vue2 --save // 注意这里是在主应用中安装

二、使用(主应用)

在项目入口文件中(main.js)引入无界

import WujieVue from 'wujie-vue2'
// 这个文件主要是配置一些子应用的测试环境地址
import hostMap from './hostMap.js'
// 这里是有多个子应用的时候,可以把子应用的地址配置放在一个文件，导入进来就行了
import {  ENV_DOMAIN_MT_MAP } from '@/constants/sub-app.js'

const { setupApp, preloadApp } = WujieVue // 使用到无界API
Vue.use(WujieVue)

// 创建应用，主要是设置配置，preloadApp、startApp的配置基于这个配置做覆盖
setupApp({
  name: '子应用名称', // 这里这个名称要和展示子应用页面设置的名称一样哦！！！！
  url: hostMap(ENV_DOMAIN_MT_MAP[process.env.VUE_APP_API_ENV]), // 子应用的域名链接
})
preloadApp({
  name: '子应用名称', // 这里这个名称要和展示子应用页面设置的名称一样哦！！！！
  url: hostMap(ENV_DOMAIN_MT_MAP[process.env.VUE_APP_API_ENV]), // 子应用的域名链接
})

hostMap.js文件

// 这里就不写公司的应用域名了，用百度做例子，到时候把自己子应用的域名写上就行了
const map = {
  // 子应用的测试环境
  '//dev-baidu.baidu.cn/': ''//dev-baidu.baidu.cn/',

// 子应用的预发环境
  '//staging-baidu.baidu.cn/': '//staging-baidu.baidu.cn/',

  // 子应用的生产环境
  '//baidu.baidu.cn/': '//baidu.baidu.cn/',
}

export default function hostMap(host) {
  if (process.env.NODE_ENV === 'production') return map[host]
  return host
}

constants/sub-app.js文件

// 子应该环境域名,这里就不写公司的应用域名了，用百度做例子，到时候把自己子应用的域名写上就行了
export const ENV_DOMAIN_MT_MAP = {
  development: '//子应用开发测试域名/', // 开发/测试环境 例如：dev.baidu.com
  staging: '//子应用预发环境域名/', // 预发环境 例如：staging.baidu.com
  production: '/子应用生产环境域名/' // 生产环境 例如：baidu.com
}

新建一个展示子应用的页面(这里是真正使用无界的时候了)
instant-sticker/instant-sticker.vue

<!-- 展示子应用的页面 -->
<style lang="scss" scoped>
#instant {
  height: calc(100vh - 81px);
}
</style>

<template>
  <div style="width: 100%; height: 100%;">
    <WujieVue
      width="100%"
      height="100%"
      name="子应用名称，这里这个名称要和main.js中设置的一样哦！！！"
      :url="mtUrl"
      :sync="true"
    />
  </div>
</template>

<script>
import user from '@/utils/user' // 这个可以忽略，是获取用户信息的
import hostMap from '@/hostMap'
import { ENV_DOMAIN_MT_MAP } from '@/constants/sub-app.js'

export default {
  name: 'instant-sticker',
  data() {
    return {
      mtUrl: '', // 子应用链接
      token: '', // 子应用需要的参数
    }
  },
  mounted() {
    this.token = user.getToken()
    this.mtUrl = `${hostMap(ENV_DOMAIN_MT_MAP[process.env.VUE_APP_API_ENV])}directBank?token=${this.token}`
  }
}
</script>

三、子应用中的配置

在子应用的配置其实很简单的，只需要在子应用main.js中稍作配置就行
main.js

// 给vue实例挂载 window.__POWERED_BY_WUJIE__，用来区分项目是否已微前端的方式放在主应用中使用
Vue.prototype.$wujie = window.__POWERED_BY_WUJIE__ ? true : false
// 子应用中使用微前端框架 - 无界 走这里
if (window.__POWERED_BY_WUJIE__) {
  let instance
  window.__WUJIE_MOUNT = () => {
    instance = new Vue({ router, store, render: (h) => h(App) }).$mount('#app')
  }
  window.__WUJIE_UNMOUNT = () => {
    instance.$destroy()
  }
} else {
	// 子应用没有以微前端的方式，使用走这里
  new Vue({
    router,
    store,
    render: (h) => h(App)
  }).$mount('#app')
}