用vite,图片资源放在public下面,使用绝对地址引用图片 子应用在public文件夹中新建assets文件夹,在assets文件夹下建一个vite1 文件夹,静态资源放置于此 主应用开发环境使用proxy,线上环境使用nginx转发 子应用使用组件插槽或者pinia,路由懒加载报错问题 小项目几个路由加载页面不使用懒加载, 大项目中懒加载的时候不要使
https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite 子应用 无需任何修改,直接启动子应用即可。 主应用 1. 安装微前端框架 microApp npm i @micro-zoe/micro-app --save 1. 2. 导入并启用微前端框架 microApp src/main.ts import microApp from '@micro-zoe/micro-app' microApp...
qiankun，出身名门的微前端，基于single-spa来实现的，但是把那些繁杂的配置包装一层，使其简单易用，但是它没想到vite的出现，所以对于vite+vue3来说配置需要踩得坑太多了，险些爬不起来。。。micro-app、今天的主角，借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComp...
兼容monaco和micro-app的插件,monaco和micro-app,在使用滚动条的时候,会出现光标位置选中错误的问题。此插件为了解决这个问题。Installingnpm install vite-plugin-microapp-monacousingimport viteMicroAppMonacoPlugin from "vite-plugin-microapp-monaco" //vite plugins: [ viteMicroAppMonacoPlugin({ monacoPath:'./...
npm init vite-app micro-app-vite-vue3.0 第二步:安装micro-app的依赖 npm i @micro-zoe/micro-app --save 第四步:main.js中引入插件,并开启 importmicroAppfrom'@micro-zoe/micro-app'microApp.start() 第五步:父工程配置路由(非严格匹配写法:pathMatch(.*)) ...
本文为你提供一套大型中台项目构建、多技术栈项目融合的最佳落地方案,并结合主流微前端框架MicroApp,流行技术栈Vue3、React18、Nuxt2、Vue2、Vite、Webpack最终聚合实现多个子应用的大型招聘网站,助力你成长为独当一面、具备team leader潜质的前端高级工程师。
vite搭建的microapp项目,提示Failed to resolve module specifier "/node_modules/vite/dist/client/env.mjs
这里,my-vue3-vite-app 是你的项目名称,--template vue-ts 指定了使用 Vue 3 和 TypeScript 作为项目模板。 目录结构 创建好项目后,你将看到如下的目录结构: 复制代码 my-vue3-vite-app/ ├── index.html ├── package.json ├── tsconfig.json ├── vite.config.ts ├── src/ │ ├──...
import{createApp,defineAsyncComponent}from"vue";import{remoteImport}from'vite-micro/client'constapp=createApp(Layout);...constRemoteButton=defineAsyncComponent(()=>remoteImport("remote_app/Button"));app.component("RemoteButton",RemoteButton);app.mount("#root"); ...