当前位置：首页 > news >正文

微前端qiankun打包部署

news 来源：原创 2025/5/15 6:36:09

官网：API 说明 - qiankun

前提：后台项目，在主应用设置菜单，微应用渲染组件，没有使用路由跳转loadMicroApp

1.token需要使用setGlobalState，传参或者方法用的setGlobalState

2.打包没有使用Nginx

3.有需要新打开的跳转页面写在主应用中进行跳转

主应用设置成hash

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

4.方法传递：

// 主应用
import { setGlobalState } from 'qiankun';
handler(param){}
actions.setGlobalState({
  mainMethods: {
    some: this.handler
  }
});

// 子应用,param是参数
// main.js
created() {
  onGlobalStateChange((state) => {
    this.$store.commit("setMainMethods", state.mainMethods);
  }, true);
},
// 实际页面中-（在需要打开新的菜单时使用）
const mainMethods = this.$store.state.mainMethods;
if (mainMethods && mainMethods.some) {
  mainMethods.some(param);
}

5.打包（打包花了我很长时间，不使用Nginx）

1.主应用入口配置：
<div :id="component">
</div>
let container = component;//页面中div的组件id值，取个唯一的

let map = {}
if (process.env.NODE_ENV === 'development') {
  map = {
    file1: '8081',// 模块1
    file2: '8082', // 模块2
  };
} else if (process.env.NODE_ENV === 'production') {
  map = {
    file1: '/child/file1/index.html',// 模块1
    file2: '/child/file2/index.html', // 模块2
  };
}
// componentType是入口值，判断当前组件页面时那个微应用的，就打开哪个端口的微应用
const entry = process.env.NODE_ENV === 'development' ? `//localhost:${map[type]}` : map[type];
this.load[content] = loadMicroApp({
  name: component,//组件名称
  entry,//入口地址
  container: container,//页面中的组件渲染div
  props: {// 传参，根据需要来
    onGlobalStateChange: actions.onGlobalStateChange,
    setGlobalState: actions.setGlobalState,  },
}, {
  sandbox: { experimentalStyleIsolation: false }
});
2.微应用配置vue.config.js：
publicPath: process.env.NODE_ENV === 'development'?'/':'/child/file1/',
3.打包目录结构
└── html/                     # 根文件夹
    |
    ├── child/                # 存放所有微应用的文件夹
    |   ├── file1/            # 这个目录里面放文件就行了，不要再套一个dist
    |   ├── file2/     
    ├── index.html            # 主应用的index.html
    ├── css/                  # 主应用的css文件夹
    ├── js/                   # 主应用的js文件夹

仔细看qiankun官网就可以了，最重点的是，

我遇到如下报错：配置entry时要加上index.html（这是重点！！其他照着官网上来就可以了）