单水疗集Vue作为外部: defineComponent不是一个功能

Question

我正在使用Vue单水疗，我决定尽量减少捆绑尺寸。为此，我首先尝试在每个微前端的webpack.config.js中将Vue设置为外部依赖项。

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

并在根配置中设置以下内容：

   <script type="systemjs-importmap">
{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/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/single-spa@5.9.0/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

Answer 1

我真的不知道为什么，但正是用这个让它起作用

 <script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/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/single-spa@5.9.0/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">

Answer 2

您在外部使用的是vue3版本，vue2 3的API与vue2不同。

我猜您是在为vue2构建的版本中使用类星体和vue路由器，或者您的完整应用程序可能构建在vue2上，因此不同的API会发生冲突。

如果您有Vue2和Vue3微前端，您可以定义两个外部元素：

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

在您的vue.config.js中，您可以使用这样的命名外部来将名称从vue3重命名为vue：

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

(理论上，您可以使用任何您想要的命名)