lishaobos / vite-plugin-legacy-qiankun

让 vite 集成 qiankun,支持 js,css 沙箱
104 stars 10 forks source link

您好,我想用jeccg作为子应用接入,但是一直报错 #8

Open hyc1009 opened 1 year ago

hyc1009 commented 1 year ago

想用https://github.com/jeecgboot/jeecgboot-vue3 作为子应用接入qiankun,但是没成功 image

lishaobos commented 1 year ago

可以提供一个你配置好的 jeccg 项目吗,我快速定位下

hyc1009 commented 1 year ago

可以提供一个你配置好的 jeccg 项目吗,我快速定位下

你好,这是我配置过的,上传到gitee了, 地址:https://gitee.com/heyunchao666/vite-test.git 微应用名字:jeccgExamWeb 可以访问的路由:http://localhost:8182/jeccgWeb/CeshiNoteList

lishaobos commented 1 year ago

image

lishaobos commented 1 year ago

你可以注意下这几个地方:

  1. 注册子应用的地方
registerMicroApps([
    {
        name: 'jeccgExamWeb',
        entry: `//localhost:8182/jeccgWeb`,
        container: '#micro',
        activeRule: '/jeccgWeb'
    },
)
  1. 因为有 css 隔离,所以 a-modal 这种挂在的容器位置也得处理,这是使用 qiankun 框架就得处理的

image

  1. 我唯一遇到错误是 window._CONFIG 的设置,也是因为 dev 没有 js 沙箱的原因

文件位置:src\hooks\setting\index.ts

// html 的 js 有沙箱,但是 import 进来的代码没有,所以得处理下
if (!window._CONFIG) window._CONFIG = {};
window._CONFIG && (window._CONFIG['domianURL'] = VITE_GLOB_DOMAIN_URL);
hyc1009 commented 1 year ago

你可以注意下这几个地方:

  1. 注册子应用的地方
registerMicroApps([
    {
        name: 'jeccgExamWeb',
        entry: `//localhost:8182/jeccgWeb`,
        container: '#micro',
        activeRule: '/jeccgWeb'
    },
)
  1. 因为有 css 隔离,所以 a-modal 这种挂在的容器位置也得处理,这是使用 qiankun 框架就得处理的

image

  1. 我唯一遇到错误是 window._CONFIG 的设置,也是因为 dev 没有 js 沙箱的原因

文件位置:src\hooks\setting\index.ts

// html 的 js 有沙箱,但是 import 进来的代码没有,所以得处理下
if (!window._CONFIG) window._CONFIG = {};
window._CONFIG && (window._CONFIG['domianURL'] = VITE_GLOB_DOMAIN_URL);

有点奇怪,因为主应用不是我这边开发的,用vuecli可以正常部署子应用,用vite-plugin-qiankun这个插件也能加载子应用,只是样式没沙箱隔离。 我自己建了个简单qiankun的主应用,用你这个插件是可以正常加载的,我也看不出是啥问题了。。 报错如下: image

lishaobos commented 1 year ago

你自己创建的 qiankun 主应用是好的,还是也会报错.

如果报错,你可以把主应用 git 地址提供下,我帮你看看,我用我自己示例跑你的没啥问题

hyc1009 commented 1 year ago

你自己创建的 qiankun 主应用是好的,还是也会报错.

如果报错,你可以把主应用 git 地址提供下,我帮你看看,我用我自己示例跑你的没啥问题

我自己建的主应用用你的插件是可以正常挂载上去的,只是公司的项目主应用不行,公司项目用vite-plugin-qiankun能挂载,,,懵逼

lishaobos commented 1 year ago

那就有可能是你公司主应用 vite 版本的原因了,查看下版本,有没有 >= 3

hyc1009 commented 1 year ago

那就有可能是你公司主应用 vite 版本的原因了,查看下版本,有没有 >= 3

和主应用的vite版本没啥关系吧?公司的主应用好像是vuecli,不是子应用的vite版本 >=3就可以吗

lishaobos commented 1 year ago

那就有可能是你公司主应用 vite 版本的原因了,查看下版本,有没有 >= 3

和主应用的vite版本没啥关系吧?公司的主应用好像是vuecli,不是子应用的vite版本 >=3就可以吗

嗯,说错了。

你可以排查下路径的问题,我发现你的多了一层

image

image

我在 entry 后面加了 / 就会出现你这样的效果,去掉就好了

entry: `//localhost:8182/jeccgWeb/`
lishaobos commented 1 year ago

那就有可能是你公司主应用 vite 版本的原因了,查看下版本,有没有 >= 3

和主应用的vite版本没啥关系吧?公司的主应用好像是vuecli,不是子应用的vite版本 >=3就可以吗

是这个原因不

hyc1009 commented 1 year ago

那就有可能是你公司主应用 vite 版本的原因了,查看下版本,有没有 >= 3

和主应用的vite版本没啥关系吧?公司的主应用好像是vuecli,不是子应用的vite版本 >=3就可以吗

是这个原因不

你好,我现在没法动主应用,我在jeccg这个把vite.config里把base注释掉路径看着就正常 image 但是我会得到如下错误。。 image

hyc1009 commented 1 year ago

那就有可能是你公司主应用 vite 版本的原因了,查看下版本,有没有 >= 3

和主应用的vite版本没啥关系吧?公司的主应用好像是vuecli,不是子应用的vite版本 >=3就可以吗

是这个原因不 image 看起来就是entry: //localhost:8182/jeccgWeb/ 多个/引起的caught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

这个有啥办法不改变主应用的代码,修改这个错误不。。