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.comstaging: '//子应用预发环境域名/', // 预发环境 例如：staging.baidu.comproduction: '/子应用生产环境域名/' // 生产环境 例如：baidu.com
}

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

<!-- 展示子应用的页面 -->
<style lang="scss" scoped>
#instant {height: calc(100vh - 81px);
}
</style><template><div style="width: 100%; height: 100%;"><WujieVuewidth="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 instancewindow.__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')
}

vue接入微前端无界框架总结相关推荐

微前端--无界方案之官网demo操作说明
下载运行 deom下载官方demo在GitHub(访问有问题,需要设置,本人未设置) 链接:https://github.com/Tencent/wujie (别处给的,也能用) pnpm下载其中 ...
【微前端】1443- 将微前端做到极致-无界方案
微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本.样式隔离.运行性能.页面白屏.子应用通信.子应用保活.多应用激活.vite 框架支持.应用共享等用户核心诉求都或存在问题,或 ...
将微前端做到极致-无界方案
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群无界框架已经开源
什么是Vue.js？||为什么要学习流行框架||框架和库的区别？||MVC和MVVM的关系图解
什么是Vue.js? Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于W ...
前端微服务无界实践 | 京东云技术团队
一.前言随着项目的发展,前端SPA应用的规模不断加大.业务代码耦合.编译慢,导致日常的维护难度日益增加.同时前端技术的发展迅猛,导致功能扩展吃力,重构成本高,稳定性低.因此前端微服务应运而生. 前端 ...
无界(wujie)微前端实现及三种通信方式介绍
一.对比之前介绍过前段时间比较流行的微前端框架qiankun,虽然实现了微前端的理念,但是也暴露出很多缺点,比如官网上讲到的四点: 基于路由匹配,无法同时激活多个子应用,也不支持子应用保活改造成本 ...
微前端：无界wujie简单上手
背景之前用过了微前端框架 qiankun 并剖析了其原理,今天我们来试试另一个同样厉害的微前端框架无界,本文只是讲如何使用,原理部分后面再更新. 无界支持多种项目的接入,如 react.vue 等 ...
官宣！前端热爱，技术无界，第十五届 D2 前端技术论坛，我们云端相聚！
第十五届 D2 前端技术论坛,如约而至. D2 前端技术论坛 (Designer & Developer Frontend Technology Forum, 简称 D2),是由阿里经济体前端 ...
vue框架项目部署到服务器_在浏览器中在线尝试无服务器框架项目！
vue框架项目部署到服务器无服务器框架是无服务器工具的一致领导者. 但是,没有简单的方法可以在线试用无服务器框架项目. 您确实需要一个体面的开发人员设置,并且需要一些工作来设置sls , npm等. ...

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

一、安装(主应用)

二、使用(主应用)

三、子应用中的配置

vue接入微前端无界框架总结相关推荐

最新文章

热门文章