信宜手机网站建设公司seo顾问服务咨询
官网：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