无界（wujie）微前端项目搭建，nginx线上部署，pnpm一键安装依赖、启动应用，git代码仓库存放方式

这里写自定义目录标题

- [1. 创建项目](#1. 创建项目)
- [2. pnpm包管理，一键安装、启动、打包](#2. pnpm包管理，一键安装、启动、打包)
- - pnpm一键安装依赖
  - [npm-run-all 一键启动、打包](#npm-run-all 一键启动、打包)
- [3. nginx线上部署](#3. nginx线上部署)
- git代码存放方式

1. 创建项目

主应用： vue3+vite3+element-plus2

子应用： react18+vite3+antd5

项目目录

布局选择

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

主应用

安装wujie依赖

javascript 复制代码

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

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

main.js引入wujie

javascript 复制代码

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/'),
    })

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

router.js中

对应的子应用组件中

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

html 复制代码

<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代码存放方式

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