单SPA设置为外部：DexeComponent不是函数

发布于 2025-01-30 19:34:36 字数 1770 浏览 1 评论 0原文

我正在使用单台水疗中心的VUE，我决定尝试降低捆绑包的尺寸。为此，首先，我通过在每个微型前端的webpack.config.js中设置为外部依赖关系开始

 externals: ['single-spa', 'vue'],

，然后在root配置中设置以下设置：

   <script type="systemjs-importmap">
{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
    "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.34/vue.global.min.js"
  }
}

</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js" as="script"
      crossOrigin="anonymous">

<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.34/vue.global.min.js" as="script"
      crossOrigin="anonymous">

但是当我尝试加载时，它会崩溃以下内容：

Uncaught TypeError: application '@workspace/foo' died in status LOADING_SOURCE_CODE: (0 , t.defineComponent) is not a function
    at vue-router.esm-bundler.js:2123:38
    at main.ts:32:38
    at Object.execute (main.ts:32:38)
    at doExec (system.js:469:34)
    at postOrderExec (system.js:465:12)
    at system.js:422:14

还有另一个

Uncaught TypeError: application '@workspace/bar' died in status LOADING_SOURCE_CODE: (0 , o.ref) is not a function
    at Object.9828 (quasar.esm.prod.jss:6:510)
    at s (bootstrapp:19:32)
    at 1.jss:3:16
    at main.tss:54:28
    at Object.execute (main.tss:54:28)
    at doExec (system.js:469:34)
    at postOrderExec (system.js:465:12)
    at system.js:422:14

原文

I am using Vue with single-spa and I decided to try to reduce the bundle size.
To do this, first I started by trying to set Vue as an external dependency by setting it in webpack.config.js of each Micro Front-end

 externals: ['single-spa', 'vue'],

and setting in the root config the following:

   <script type="systemjs-importmap">
{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
    "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.34/vue.global.min.js"
  }
}

</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js" as="script"
      crossOrigin="anonymous">

<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.34/vue.global.min.js" as="script"
      crossOrigin="anonymous">

but when I try to load, it crashes with the following:

Uncaught TypeError: application '@workspace/foo' died in status LOADING_SOURCE_CODE: (0 , t.defineComponent) is not a function
    at vue-router.esm-bundler.js:2123:38
    at main.ts:32:38
    at Object.execute (main.ts:32:38)
    at doExec (system.js:469:34)
    at postOrderExec (system.js:465:12)
    at system.js:422:14

and also for another

Uncaught TypeError: application '@workspace/bar' died in status LOADING_SOURCE_CODE: (0 , o.ref) is not a function
    at Object.9828 (quasar.esm.prod.jss:6:510)
    at s (bootstrapp:19:32)
    at 1.jss:3:16
    at main.tss:54:28
    at Object.execute (main.tss:54:28)
    at doExec (system.js:469:34)
    at postOrderExec (system.js:465:12)
    at system.js:422:14

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫七 2025-02-06 19:34:36

您在外部使用中使用VUE3版本，VUE3的API与VUE2不同。

我想您是在为VUE2构建的版本中使用Quasar和Vue-Router，或者您的完整应用程序可能是在VUE2上构建的，因此不同的API会发生冲突。

如果您具有VUE2和VUE3微额定值，则可以定义两个外部：

"vue": "https://vue2location.example",
"vue3": "https://vue3location.example"

在您的vue.config.js中，您可以使用此类名为Externals从VUE3重命名为VUE ：（

config.externals({
  vue: 'vue3'
})

从理论上讲，您可以使用任何想要的命名））

You are using a vue3 Version in your externals and Vue3's API is different from vue2.

I guess you are using quasar and vue-router in a version built for vue2, or your full Application might be built on vue2, so the different APIs will clash.

If you have Vue2 and Vue3 Microfrontends you can define two externals:

"vue": "https://vue2location.example",
"vue3": "https://vue3location.example"

And in your vue.config.js you can use named externals like this to rename from vue3 to vue:

config.externals({
  vue: 'vue3'
})

(in theory you could use any naming you want)

回复收藏 0 原文

水水月牙 2025-02-06 19:34:36

我真的不知道为什么，但是完全使用它使它起作用

 <script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
        "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.29/vue.global.prod.min.js",
        "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.12/vue-router.global.prod.min.js",
        "vue-i18n": "https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/9.2.0-beta.35/vue-i18n.global.prod.min.js"
      }
    }

    </script>
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js" as="script"
          crossOrigin="anonymous">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.29/vue.global.prod.min.js" as="script"
          crossOrigin="anonymous">

I really don't know why, but using exactly this made it work

 <script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
        "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.29/vue.global.prod.min.js",
        "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.12/vue-router.global.prod.min.js",
        "vue-i18n": "https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/9.2.0-beta.35/vue-i18n.global.prod.min.js"
      }
    }

    </script>
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js" as="script"
          crossOrigin="anonymous">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.29/vue.global.prod.min.js" as="script"
          crossOrigin="anonymous">

回复收藏 0 原文

~没有更多了~