一、简介qiankun应用
微前端,之前一直都有简单了解过微服务,大概就是N个类型的服务都注册到主要服务上,然后就各自管理即可。而后期又发展了微服务,前端的微服务简单来说就是,【子应用】(N个站,或者应用,或者模块)都注册到一个【父应用】上,然后各自管理,开发即可,每个子用应又可以是独立的,也不用管子应用到底是用什么开发,总之最后对接注册到父应用上即可。
举个例子:
系统1(jquery+js),系统2(vue.js),系统3(react.js), 现在需要将三个系统整合成一个系统。如何做呢?如下图
1 主应用(父应用,即入口)窗口
2 子应用-vue.js 窗口
3 子应用-react 窗口(注意react仅代表第二个应用,请勿略实际内容)
说明:
a.上面三图是我搭建的qiankun(以下称为QK),第一张为主图,第二张为子应用1,第三张为子应用2,三个应用通过上方菜单切换(实际中,你的父应用可以是所有菜单,或者按模块加载等)
b.每个应用也可以独立打开,注意红色区域,如下图,这么做的目的是每个子应用开发人员可以针对自己的项目进行开发,实际中你可以将公共的信息区分一下即可,比如用户显示等信息,合在一起时再通过父去显示即可
二、搭建
1 准备工具:三个空白项目,并默认安装ELEMENT-UI(可选)
2 父应用配置
父应用中安装qiankun包:
npm i qiankun -S
配置父应用的main.js文件,如下
import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.config.productionTip = false import { registerMicroApps, start } from 'qiankun' //子应用注册信息 const apps = [ { name: 'vueApp', entry: '//localhost:10000', container: '#vue', activeRule: '/vue', props: { a: 1 }, //父应用传值 }, { name: 'reactApp', entry: '//localhost:10100', container: '#react', activeRule: '/react', }, ] registerMicroApps(apps) start({ prefetch: false, //取消预加载 }) new Vue({ router, render: (h) => h(App), }).$mount('#app')
3 配置【子应用01】
子应用不需要安装qiankun.js
配置main.js
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false let instance = null function render(props) { instance = new Vue({ router, render: (h) => h(App), }).$mount('#app') //默认挂载自己的HTML,基座 } if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ } if (!window.__POWERED_BY_QIANKUN__) { // 如果是独立运行此项目,则直接运行 render() } export async function bootstrap(props) {} export async function mount(props) { console.log(props) render(props) } export async function unmount(props) { instance.$destroy() } 修改vue.config.js module.exports = { devServer: { port: 10000, headers: { 'Access-Control-Allow-Origin': '*', }, }, configureWebpack: { output: { library: 'vueApp', libraryTarget: 'umd', }, }, }
修改router.js,路由访问规则
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'), }, ] const router = new VueRouter({ mode: 'history', base: '/vue', //修改路由访问规则 routes, }) export default router
注意,base中的根路由,要与父应用中的路由保持一致,如若不一致,就会出现路由访问不正确,从而无法显示你的页面
***********子应用路由配置*********** const router = new VueRouter({ mode: 'history', base: '/vue', //修改路由访问规则 routes, }) ***********父应用注册信息*********** const apps = [ { name: 'vueApp', entry: '//localhost:10000', container: '#vue', activeRule: '/vue', props: { a: 1 }, //父应用传值 }... ]
到此,配置结束,第二个子应用与上面配置方法一样,
注意:
路由信息配置:【base: '/vue'】【activeRule: '/vue',】两项的配置即可。
vue.config.js配置:
configureWebpack: { output: { library: 'reactApp', libraryTarget: 'umd', }, },
最后一部,将三个应用全部启动,打开父应用的地址,即可出现开头的内容,本地化配置结束。
主应用访问子应用示例:
http://localhost:8080/vue/Home
版权声明:本文为CSDN博主「小三金」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/tdjqqq/article/details/122088823