接入vue2项目和vue3项目对应路由模式分别是hash和history主应用主应用是基于vue3开发的一个门户网站,仅有登录以及门户列表。基于路由配置方式通过将微应用关联到一些 url 规则的方式,实现当浏览器 url 发生变化时,自动加载相应的微应用的功能。安装qiankun npm i qiankun -S # 或者 yarn add qiankun 在主应用中...
创建indexView.vue 。用于显示微应用容器 2:在应用main.js 中 引入配置 3: 在router.js 中配置子应用的路由。挂载在之前的indexView.vue 下 4:在主应用的菜单 配置需要跳转微应用的路由菜单 二:修改vue3+vite 为微应用。创建方式npm init vite@latest 1:修改main.ts 2:配置vite.config.ts 3:配置微应用的...
import{qiankunWindow,renderWithQiankun}from'vite-plugin-qiankun/dist/helper';import{createApp}from'vue';importAppfrom'./App.vue';importrouterfrom'./router';letapp;functionrender(props){const{container}=props;app=createApp(App);app.use(router).mount(containerinstanceofElement?(container.querySelect...
设置vue实例和路由,这里建议把路由按照如下示例来写,在微应用卸载的时候将实例和路由有销毁,以便更好的垃圾回收 vue2🌰 import'./public-path';importVuefrom'vue';importVueRouterfrom'vue-router';importroutesfrom'./routes';importAppfrom'./views/App';Vue.use(VueRouter);// qiankun window全局变量consti...
简介:微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用 一、了解qiankun.js qiankun - qiankun 1.1、简单,任意 js 框架均可使用。微应用接入像使用接入一个iframe系统一样简单,但实际不是 iframe。 1.2、完备,几乎包含所有构建微前端系统时所需要的基本能力,如 样式隔离、js 沙箱、预加载等...
主应用(基座):vue3+vite 子应用(各业务):建议 vue2+webpack(不支持vite) 官网链接:qiankun.umijs.org/zh/gu 1、安装qiankun npm install qiankun 2、在主应用中注册微应用 //main.js import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'react app', // app name...
问题描述:使用qiankun做为微前端时,主应用是vue3+elementPlus,子应用是vue2+element。这时主应用的elementPlus的样式会作用到子应用element,带来样式污染。
主服务增加router地址/qiankunVue3/*来承载vue3子项目,接入之后主服务所有/qiankunVue3的路由地址都将由子服务渲染。 下面代码省略了引入部分,导出的micoapp会合并到主服务的router.routes对象中 主服务增加一个routes对象: const qiankunVue3Layout = () => import(/* webpackChunkName: "micoapp" */ '@/...
vue子应用本地代理devServer中添加: headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Credentials': true, 'Access-Control-Allow-Methods': 'GET,POST,OPTIONS,PUT,DELETE,FETCH', 'Access-Control-Allow-Headers': 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control...
3. 子节点 子节点源码可见于https://github.com/Kuari/Blog/tree/master/Examples/microFrontend/site_1 此处以site1为例,site2同理。 创建子节点,选择vue3+ts vue create site_1cdsite_1 编辑src/App.vue <template><router-view/></template>