广州建设技术职业学院是公办吗_优化方案电子版_杭州疫情最新情况_南宁网站推广公司

1. 创建项目

主应用： vue3+vite3+element-plus2
子应用： react18+vite3+antd5

项目目录

布局选择

主应用顶部菜单切换子应用，子应用中根据window.__POWERED_BY_WUJIE__ 变量来动态选择layout方案。

主应用

1. 安装wujie依赖

// vue3 框架
npm i wujie-vue3 -S// vue2 框架
npm i wujie-vue2 -S

2. main.js引入wujie

import WujieVue from 'wujie-vue3'
import hostMap from './hostMap'
import lifecycles from './lifecycle'const {setupApp, preloadApp, bus} = WujieVue
const app = createApp(App)
app.use(WujieVue).use(router).mount('#app')setupApp({name: 'platformManagement',url: hostMap('//localhost:7501/'),exec: true,// props,alive: true,...lifecycles
})setupApp({name: 'systemManagement',url: hostMap('//localhost:7502/'),exec: true,// props,alive: true,...lifecycles
})/** 预加载(空闲时才会加载)  */preloadApp({name: 'platformManagement',url: hostMap('//localhost:7501/'),})preloadApp({name: 'systemManagement',url: hostMap('//localhost:7502/'),})       

3. hostMap.js
   
4. 路由配置(以子应用platformManagement为例)

router.js中

对应的子应用组件中

主应用菜单中配置对应子应用路由跳转

<el-menu-item index="2" route="/platformManagement"><span>平台管理</span>
</el-menu-item>

子应用

子应用中安装依赖wujie-react, vite.config.tsvite.config.ts中设置启动端口号，需跟主应用hostMap中对应的一致。

wujie对子应用侵入较少，只需根据宿主环境动态选择layout方案，就可以接入进来。（如有跨域等问题需另外处理）

2. pnpm包管理，一键安装、启动、打包

pnpm一键安装依赖

项目根目录 pnpm init ,新建pnpm-workspace.yaml 文件，如下图配置主应用及子应用目录。此时在根目录下 执行pnpm i命令即可一键安装所有项目的依赖。

npm-run-all 一键启动、打包

首先在根目录下安装npm-run-all，在package.json中做如下配置。注意脚本命令后面的文件夹及子应用名称，后期如添加子应用需手动在这里添加对应脚本命令。

此时在根目录下运行npm run start和npm run build即可一键启动应用和一键打包（构建目录名称可单独在子应用中配置）

3. nginx线上部署

主应用中

router配置中的path与hostMap中的子路由地址不能完全相等，否则nginx会出现资源加载异常问题。

子应用中

以上图中platform-management为例，打包根路径与路由根路径都需设置成 /platform-management/。 （React-routerV6版本设置路由根路径时需要去掉最后的斜杠，/platform-management）

子应用中通过环境变量配置打包路径（react-routerV6）

nginx文件目录及配置

git代码存放方式

1. .gitignore配置
   这里用的是聚合库的方式，主应用放在聚合库里，每个子应用都有自己单独的仓库。聚合库的.gitignore文件里添加子应用文件夹名称。（这里的两个子应用需要跟随主应用库，如需单独存放，去掉后两行即可。）
   
2. 如下图，在package.json文件中创建脚本文件clone-all.sh，在sh文件中配置下子应用的仓库地址即可，后期如新增子应用，也需要在这里添加仓库地址