项目选型
微前端有qiankun,micro-app等,为什么选中了micro-app?
两个框架都使用了微前端概念,但是micro-app对原有的项目入侵最少,极大减少修改原项目;qiankun是需要修改原项目的,毕竟作为子应用的项目都运行很久了;为了减少开发成本,减少代码选择京东开源的micro-app
micro-app介绍
官网的介绍可以自己去看,这里不就不做重复了 直接上教程
项目中使用
你可以使用任何一项构建工具,当做基座使用
目录如下
基座版本如下:
"vue":"^3.2.37"
"@micro-zoe/micro-app": "^0.8.10"
"vite": "^3.0.7"
"vue-router": "^4.1.5"
基座配置
1 第一步在main.js中引入micro-app,并且执行micro.start函数;开启微前端模式
import microApp from '@micro-zoe/micro-app'
microApp.start()
2 第二步 在相应的文件中使用micro-app的标签 (这里以vue3的子应用举例)
<micro-app baseroute='/vue3' name='vue3' url='http://localhost:3003/'></micro-app>
micro-app标签中
name(必传且唯一)：应用名称,类似key的作用
url(必传且唯一)：应用地址，会被自动补全为http://localhost:3000/index.html ,子应用的地址
baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 /vu3,用于区分子应用的path,也可以不选
如果关闭了沙箱机制 baseroute失效,且样式隔离失效
子应用配置
3 第三步在vue3子应用中设置
vue3子应用为vue-cli 创建的项目,如是vite或者react创建的项目需要单独配置
-
3.1 在vue.config.js中添加云讯跨域
devServer: { headers: { 'Access-Control-Allow-Origin': '*', } } -
3.2 如果基座是histroy路由.子应用是hash路由此步骤跳过
const index = createRouter({ // 👇 __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由 history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL), routes }) -
3.3 设置 publicPath 如果子应用不是webpack构建的，这一步可以省略。
步骤1: 在子应用src目录下创建名称为public-path.js的文件，并添加如下内
// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) { // eslint-disable-next-line
__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ }
步骤2: 在子应用入口文件的最顶部引入public-path.js
import './public-path'
-
3.4 在main.js中监听卸载
//1 监听卸载操作 window.addEventListener('unmount', function () { createApp(App).unmount() }) // 2 如果子应用频繁卸载可以使用umdm模式 两者取其一 // main.js import { createApp } from 'vue' import * as VueRouter from 'vue-router' import routes from './router' import App from './App.vue' let app = null let router = null let history = null // 👇 将渲染操作放入 mount 函数 -- 必填 function mount () { history = VueRouter.createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || '/') router = VueRouter.createRouter({ history, routes, }) app = createApp(App) app.use(router) app.mount('#app') } // 👇 将卸载操作放入 unmount 函数 -- 必填 function unmount () { app.unmount() history.destroy() app = null router = null history = null } // 微前端环境下，注册mount和unmount方法 if (window.__MICRO_APP_ENVIRONMENT__) { window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount } } else { // 非微前端环境直接渲染 mount() }
以上就是vue3作为子应用的配置
分别启动基座项目与子应用的项目后点击vue3应用
vite子应用使用需要单独处理 官网地址
由于vite作为子应用的构建方式与webpack不同需要单独去适配,下面是使用方法
基座处理
<micro-app name='child-name'
url='http://localhost:3001/basename/'
inline // 使用内联script模式
disableSandbox // 关闭沙箱
/>
这里关闭沙箱机制,所以baseUrl失效,样式隔离也失效了,基座的数据传输需要单独去处理;如果项目中接入了vite子应用需要考虑怎么处理样式隔离;考虑没有了沙箱机制出现的问题该如何去解决(我也不知道会出现什么问题,官网的建议是不接入等,1.0版本发布;) 我做的项目是vite基座+vite子应用,下面我会详细的介绍我是都碰到了什么问题,以及怎么解决的;ps:我做的项目以上线.
基座是vite应用的话需要再处理main.js 如果不是 忽略此步骤;
此处是处理vite引用开发环境中
import microApp from '@micro-zoe/micro-app'
microApp.start({
plugins: {
modules: {
// appName即应用的name值
appName: [{
loader(code) {
if (process.env.NODE_ENV === 'development') {
// 这里 basename 需要和子应用vite.config.js中base的配置保持一致
// 这里处理的是开发环境下匹配到from 或者import 引入的文件以子应用域名/basename去替换
code = code.replace(/(from|import)(\s*['"])(/basename/)/g, all => {
return all.replace('/basename/', '子应用域名/basename/')
})
}
return code
}
}]
}
}
})
vite子应用处理 官网地址
按照官网的配置处理,下面是我的配置
- 修改容器id
2. 修改route为hash路由
- 图片处理
4. vite.config.js处理(这里后面会讲到处理了什么,具体在部署那块)
到此都已经处理完成. 因为项目中没用到Angular,next.js 这里就不讲了,具体可以看官网;
路由处理 官网地址
注意以下几点:
路由配置:
基座是hash路由，子应用也必须是hash路由
基座是history路由，子应用可以是hash或history路由
baserouter 是基座分发给子应用的路径,子应用可以从window.__MICRO_APP_BASE_ROUTE__上获取baseroute的值，用于设置基础路由(此处是用于标识子应用的路由)
注意此处如果基座是history路由,且子应用也是history路由,并且设置了baseroute, 那么当前子应用页面的路由path需要与baseroute 一致; 因为子应用是根据游览器上的地址渲染对应的页面
子应用不会根据micro-app的url属性渲染对应的页面，而是根据浏览器地址渲染对应的页面
此句话可以理解为 子应用只会加载当前index.html的地址
例: 子应用地址为：http://localhost:3003
如果我们想渲染的地址为http://localhost:3003/page
那么 我们正确的写法应该是 而不是url='http://localhost:3003/page'
<micro-app name='vue3' url='http://localhost:3003/' baseroute='/vue3'></micro-app>
那么 我们如何跳转到这个页面呢? 基座中跳转的参数为：
router.push('/page')
