官網：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',// 模塊1file2: '8082', // 模塊2};
} else if (process.env.NODE_ENV === 'production') {map = {file1: '/child/file1/index.html',// 模塊1file2: '/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,//頁面中的組件渲染divprops: {// 傳參，根據需要來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（這是重點！！其他照著官網上來就可以了）

我還遇到了微應用地址報500的問題：

部署的時候會有一個配置文件（配置api代理地址），這個文件只要放在跟目錄下就行了，子目錄里面不要放這個文件，不然微應用會報錯500