Vue3 TypeScript 微应用实战教程，如何构建高效长尾词策略？

本文共计912个文字，预计阅读时间需要4分钟。

目录+项目准备+子项目配置+主应用项目配置+项目准备+1. 基于amin-work-x项目作为起始项目，改造动态菜单为自定义菜单+2. 分别在主应用项目（main）和子应用项目（childrenOne, childrenTwo）中安装

目录

• 项目准备
• 子项目配置
• 主应用项目配置

项目准备

1、基于amin-work-x项目作为原始项目，改造动态菜单为自定义菜单

2、分别在主应用项目(main)和子应用(childrenOne,childrenTwo)项目中安装microApp

npm i @micro-zoe/micro-app --save

子项目配置

1，修改子项目mian.ts，添加与基座的交互配置和路由冲突解决

import { createApp } from "vue"; import App from "./App.vue"; import { Router } from 'vue-router' import router from "./router"; import "./utils/router"; import ElementPlus from "element-plus"; import "element-plus/dist/index.css"; import "dayjs/locale/zh-cn"; import zhCn from "element-plus/es/locale/lang/zh-cn"; import "@/icons/iconfont/iconfont.css"; import "@/icons/iconfont/iconfont.js"; import "@/styles/main.css"; import LayoutStore from "@/layouts"; import github.com/micro-zoe/micro-app/issues/155 * 当前vue-router版本：4.0.12 */ function fixBugForVueRouter4(router: Router) { // 判断主应用是main-vue3或main-vite，因为这这两个主应用是 vue-router4 if (window.__MICRO_APP_ENVIRONMENT__) { //if (window.location.href.includes('/main-vue3') || window.location.href.includes('/main-vite')) { /** * 重要说明： * 1、这里主应用下发的基础路由为：`/main-xxx/app-vue3`，其中 `/main-xxx` 是主应用的基础路由，需要去掉，我们只取`/app-vue3`，不同项目根据实际情况调整 * * 2、realBaseRoute 的值为 `/app-vue3` */ const realBaseRoute = window.__MICRO_APP_BASE_ROUTE__;//.replace(/^\/app-tenant-[^/]+/g, '') router.beforeEach(() => { if (typeof window.history.state?.current === 'string') { window.history.state.current = window.history.state.current.replace(new RegExp(realBaseRoute, 'g'), '') } }) router.afterEach(() => { if (typeof window.history.state === 'object') { window.history.state.current = realBaseRoute + (window.history.state.current || '') } }) } } const app = createApp(App); Object.keys(Icons).forEach((it) => { app.component(it, (Icons as any)[it]); }); registerComponents(app); app.use(LayoutStore, { state: { layoutMode: "ltr", }, actions: { onPersonalCenter() { router.push({ path: "/personal", query: { uid: 1 } }); }, onLogout() { router.replace({ path: "/login", query: { redirect: "/" } }).then(() => { window.location.reload(); }); }, }, }); app.use(pinia).use(router); app.use(ElementPlus, { locale: zhCn, }); app.use(localhost:4009/app-one" : "通过配置获取线上地址", microAppData: { msg: "来自基座的数据" }, }; }, methods: { handleCreate(): void { console.log("child-vue3 创建了"); }, handleBeforeMount(): void { console.log("child-vue3 即将被渲染"); }, handleMount(): void { console.log("child-vue3 已经渲染完成"); setTimeout(() => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore this.microAppData = { msg: "来自基座的新数据" }; }, 2000); }, handleUnmount(): void { console.log("child-vue3 卸载了"); }, handleError(): void { console.log("child-vue3 加载出错了"); }, handleDataChange(e: CustomEvent): void { console.log("来自子应用 child-vue3 的数据:", e.detail.data); }, }, }; </script> <style></style>

2，在主应用中注册子应用路由

子应用的路由第一次指向主应用的layout，第二层指向上面新建的入口文件

3，修改主应用publicPath

此处的publicPath需与app-one中的baseroute保持一致

配置完成后，先后运行两个项目后，在主应用中手动添加一个子应用的的具体页面路由，就可以在主应用中打开子应用了，但是此时子应用的路由表覆盖了主应用。

为解决这个问题，需要在子应用中添加一个非layout布局的空页面，当子应用单独运行时，指向layout布局页面，如果是在微服务中使用，则指向空页面

src\layouts\EmptyLayout.vue

<template> <div class="empty-layout"> <router-view> </router-view> </div> </template> <style lang="scss" scoped> .empty-layout { height: 100%; } </style>

src\router\index.ts

到此这篇关于vue3+ts+MicroApp实战教程的文章就介绍到这了,更多相关vue3 ts MicroApp内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！