Javascript 如何在vue应用程序中使用独立的vue库？

我试图在vue应用程序中使用vue组件库，该库由脚本标记加载。该组件库正在使用网页包设置，并使用设置

externals

排除所有vue依赖项。因此，使用该库的主机包必须提供vue和其他所需的依赖项。 组件库本身正在使用vue cli和脚本

vue cli服务构建--target lib

来构建

lib.umd.js

文件。在主机包的

index.html

中，我只是通过一个脚本标记包含了该文件。主机捆绑包的网页包设置使用

config.externals（['@test/my component library']）

排除正在外部加载的组件库。在主机包中，我使用的组件库如下所示：

import { MyComponent } from '@test/my-component-library'

运行应用程序时，出现以下错误：

Uncaught SyntaxError:Invalid或unexpected token

。此错误发生在我的主机捆绑包的以下行中：

/*!*******************************************************!*\
  !*** external "@test/my-component-library" ***!
  \*******************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("module.exports = @test/my-component-library;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQHRlc3QvbXktY29tcG9uZW50LWxpYnJhcnkuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vZXh0ZXJuYWwgXCJAdGVzdC9teS1jb21wb25lbnQtbGlicmFyeVwiPzFjOTAiXSwic291cmNlc0NvbnRlbnQiOlsibW9kdWxlLmV4cG9ydHMgPSBAdGVzdC9teS1jb21wb25lbnQtbGlicmFyeTsiXSwibWFwcGluZ3MiOiJBQUFBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///@test/my-component-library\n");
/***/ })

---

有人知道为什么webpack会产生这样的代码，以及我如何纠正它吗？

我想我找到了解决方案。因此，首先，我对

externals

的配置是错误的。正确的配置是：

config.externals({
  '@test/my-component-library': {
    root: '@test/my-component-library',
    commonjs2: '@test/my-component-library',
    commonjs: '@test/my-component-library',
    amd: '@test/my-component-library',
  },
})

在组件库中，我必须添加webpack配置

config.output.library（'MyComponentLibrary'）

，以便对象

MyComponentLibrary

在窗口范围内全局可用。然后我不得不删除主机包中的import语句。要注册组件，我必须将此行添加到我的vue文件中：

components: {
  'MyComponent': MyComponentLibrary.MyComponent,
}

---

但现在我有另一个问题。组件库本身正在使用vuetify（另一个组件库）。但是我还将vuetify添加到

externals

选项中，因为我的主机包已经包含vuetify。现在我得到了大量的

未知自定义元素

异常。显然，我的组件库在主机包中找不到vuetify组件。这个问题有什么解决方案吗？

我不确定您是否必须设置导出模块的类型，例如root？如果我使用

config.externals（{'@sldo/sldo crm kundenaktionen plugin'：{root:'@sldo/sldo crm kundenaktionen plugin'}），错误就消失了。

。但是现在我得到

无法读取未定义的属性“MyComponent”

。这是因为我从'@test/my component library'导入的{MyComponent}不起作用。我该怎么办？如果你发一个新问题，我想你会有更好的机会得到答案