关于qiankun微前端使用中遇到的问题记录

622 阅读1分钟

如何使用qiankun原文地址 本文不再介绍如何使用qiankun构建微前端项目,只介绍项目中有可能会遇到的问题。

1 跨域问题

如果遇到跨域问题须在vue.config.js中配置跨域

headers:{ 'Access-Control-Allow-origin':'*' // 配置都允许跨域 }

2 端口问题

子项目端口需与父项目配置的一样

image.png

父应用中的配置

image.png

3 挂载问题

image.png

假如你的子应用中main.js是这么写的,有可能会报目标容器不存在的错误

image.png

所以在子应用中最好这么写

image.png

'#vue'是你在父应用中命名的子应用的名称

image.png

在子应用中APP.vue 中

image.png

以及这里都改成id = vue

image.png

对了,记得在子应用mount函数中接收props

image.png

这样就可以在render使用container

image.png

4 子应用独立运行

image.png