一、安装
在主应用中安装无界,我主使用的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') }