子应用配置UMD模式，在主应用中访问时，没有触发mount方法

[trry-hub]

问题描述

子应用配置UMD模式，在主应用中访问时，没有触发mount方法

复现步骤

1.

2.

上传截图

复现仓库

请提供一个精简的代码仓库，然后上传到自己的 github，以帮助我们复现您的问题。

环境信息

• micro-app版本：1.0.0-rc.4
• 主应用前端框架&版本：vue2.6.11 + cli
• 子应用前端框架&版本：vue3.4.21 + vite
• 构建工具&版本：

[bailicangdu]

这里要加上子应用域名

[trry-hub]

这里要加上子应用域名

不是这个问题，加上也不行的。

[trry-hub]

我找到原因了，是因为我使用了 unocss，但我没有时间去了解为什么会导致这个问题， 希望大佬 @bailicangdu 空了帮我看下，我这边需要使用 unocss，但我也需要使用 umd模式，复现地址，https://github.com/trry-hub/issues.git

[icemirror]

我也遇到类似的问题，代码都已经进到了vue3的入口文件了，但是就是没有调用mount方法，本地开发时是正常的，发布到线上就发现子应用并没有被渲染。也没有出现任何错误 micro-app版本：1.0.0-rc.4 主应用前端框架&版本：vue2.6.11 + webpack5 子应用前端框架&版本：vue3.4.21 + webpack5 base:

<micro-app
    :data="microAppData"
    name="admin-vue3"
    baseroute="/admin-vue3"
    url="{domain}/vue3/"
    router-mode="native"
  ></micro-app>

microApp.start({
    'disable-patch-request': true,
    /**
     * @param url
     * @param options fetch settings
     * @param appName micro app name
     * @returns Promise<string>
     */
    fetch(url, options) {
      return fetch(
        url,
        Object.assign(options, {
          credentials: 'include'
        })
      ).then(res => {
        return res.text()
      })
    }
  })
}

micro:

if (isMicroApp) {
  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
} else {
  mount()
}

这种问题大概应该从哪里着手排查呢，控制台没有任何错误。麻烦大佬指点一下，谢谢 @bailicangdu

[trry-hub]

我也遇到类似的问题，代码都已经进到了vue3的入口文件了，但是就是没有调用mount方法，本地开发时是正常的，发布到线上就发现子应用并没有被渲染。也没有出现任何错误 micro-app版本：1.0.0-rc.4 主应用前端框架&版本：vue2.6.11 + webpack5 子应用前端框架&版本：vue3.4.21 + webpack5 base:

<micro-app
    :data="microAppData"
    name="admin-vue3"
    baseroute="/admin-vue3"
    url="{domain}/vue3/"
    router-mode="native"
  ></micro-app>

microApp.start({
    'disable-patch-request': true,
    /**
     * @param url
     * @param options fetch settings
     * @param appName micro app name
     * @returns Promise<string>
     */
    fetch(url, options) {
      return fetch(
        url,
        Object.assign(options, {
          credentials: 'include'
        })
      ).then(res => {
        return res.text()
      })
    }
  })
}

micro:

if (isMicroApp) {
  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
} else {
  mount()
}

这种问题大概应该从哪里着手排查呢，控制台没有任何错误。麻烦大佬指点一下，谢谢 @bailicangdu

我的建议可以先尝试用最小demo 复现，这个过程你可能会找到问题

[icemirror]

你的问题是开发环境的吗？还是线上环境呢 @trry-hub

[trry-hub]

你的问题是开发环境的吗？还是线上环境呢 @trry-hub

我是在开发环境遇到的，加v: trry-wechat 尽量帮你排查下

[icemirror]

你的问题是开发环境的吗？还是线上环境呢 @trry-hub

我是在开发环境遇到的，加v: trry-wechat 尽量帮你排查下

我是线上的问题，而且没有报错 T.T

[zcx992132258]

我发现原因是因为我使用了unocss，但我没有时间去了解为什么会导致这个问题，希望大佬@bailicangdu空了找来看，我这边需要使用unocss，但我也需要使用umd模式，复现地址，https://github.com/trry-hub/issues.git

请问怎么去解决这个问题啊 使用了unocss 无法触发umd模式

[trry-hub]

我发现原因是因为我使用了unocss，但我没有时间去了解为什么会导致这个问题，希望大佬@bailicangdu空了找来看，我这边需要使用unocss，但我也需要使用umd模式，复现地址，https://github.com/trry-hub/issues.git

请问怎么去解决这个问题啊 使用了unocss 无法触发umd模式

使用vue-scoped 模式可以解决

[trry-hub]

你的问题是开发环境的吗？还是线上环境呢 @trry-hub

我是在开发环境遇到的，加v: trry-wechat 尽量帮你排查下

我是线上的问题，而且没有报错 T.T

你的问题解决了么

[zcx992132258]

我发现因为我使用了unocss，但我没有时间去了解为什么会导致这个问题，希望大佬@bailicangdu空了找来看，我这边需要使用unocss，但我也需要使用umd模式，复现地址，https://github.com/trry-hub/issues.git

请问怎么去这个框架啊使用了unocss无法触发umd模式

使用vue-scoped 模式可以解决

可以给一个文档连接吗 我在文档上面没有找到 vue-scoped 模式

[trry-hub]

unocss 的能力

main.ts 中 的引入可以删除

[github-actions[bot]]

Hello @trry-hub. The issue you reported has been fixed. This issue will be closed. Thank you for your feedback. 您好 @trry-hub，您反馈的问题已修复，该 issue 将要被关闭，感谢反馈。