microApp.setData(appName, { path: childPath }) } } onMounted(() => { getActiveIndex() microApp.addGlobalDataListener((data) => { // console.log("全局数据:", data); getActiveIndex() }) window.addEventListener('popstate', () => getActiveIndex()) }) #HeaderNav { width: 100%;...
入口文件main.js,映入微前端引擎micro-app启动微前端。此处的loader的作用是因为vite开发模式下引入的资源是相对路径，但是子应用也是vite的情况下，主应用加载资源的时候就会以主应用为域名去加载，加载不到子应用的资源，所以无法执行；需要处理子应用静态资源，写一个简易的插件，对开发环境的子应用进行处理，补全静态...
https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite 子应用 无需任何修改,直接启动子应用即可。 主应用 1. 安装微前端框架 microApp AI检测代码解析 npm i @micro-zoe/micro-app --save 1. 2. 导入并启用微前端框架 microApp src/main.ts AI检测代码解析 import microApp from '@...
- 9个月前 README.md vite模版项目 2年前 index.html esm依赖处理 8个月前 nginx.conf gzip 2年前 package.json 更新microapp版本 7个月前 s.yml config 8个月前 vite.config.js 中转路由, MicroApp组件封装 8个月前 yarn.lock vite模版项目 ...
Micro App react16应用 react17应用 vue2应用 vue3应用 vite应用 angular11应用 多个应用 自带页面Serati Ma 发送数据 Hello Vue 3 + Vite Vite Documentation | Vue 3 Documentationcount is: 0 Edit components/HelloWorld.vue to test hot module replacement. Go to page2...
换个思路,可以从编译时沙箱入手。用 transform 钩子将应用所有的 window 转译为沙箱fakeWindow,从而达到隔离效果。 代码示例 大家可以 clone 下来学习 插件仓库:https://github.com/MinJieLiu/micro-app/tree/main/packages/micro-vite-plugin 微前端示例:https://github.com/MinJieLiu/micro-app-demo...
1、子工程修改路由 const router = new VueRouter({ mode: 'history', base: window.__MICRO_APP_BASE_ROUTE__ || '/', routes }); 2、子工程配置跨域,在vue.config.js中 devServer: { headers: { 'Access-Control-Allow-Origin': '*', }, port: port, open: true, overlay: { warnings: fals...
为实现上述的设想,vite-micro 基于vite 将 模块联邦思想融入到微前端框架中,以组件维度进行载入,更细粒度的来复用业务,在vite-micro中,一个脚本,一个应用页面也可以称为一个组件,微应用类比后端的微服务,向外暴露的组件可以叫做接口,接口的request可以叫做依赖或者公共依赖,接口的response可以返回前端业务组件, vite-...
在主应用(main.js 或 app.js)中注册子应用。 修改src/main.js 或 src/main.ts import {createApp} from 'vue' import './style.css' import App from './App.vue' import {registerMicroApps, start} from "qiankun"; import {createRouter, createWebHashHistory} from "vue-router"; const app =...
但前提是需要为每个 <MicroApp /> 设置一个唯一的 id。并且样式性能会受到影响,CSSModules 方案会更好。 JS 沙箱 虽然在 ESM 中做运行时沙箱目前没有现成的方案,但运行时沙箱性能非常差。换个思路,可以从编译时沙箱入手。用 transform 钩子将应用所有的 ...