vue-cli 如何从组件构建一个库并导入它？

Posted 2023-02-22

【中文标题】vue-cli 如何从组件构建一个库并导入它？

【英文标题】：vue-cli how to build a lib from component and import it?

【发布时间】：2019-01-16 11:16:39

【问题描述】：

我正在使用 vue-cli 通过以下命令构建我的库： "build": "vue-cli-service build --target lib --name myLib ./src/component.vue",

构建后如何从dist 文件夹导入组件？

我试过了

 // undefined
 import  component  from '../../myLib/dist/myLib.umd.js' 
 // undefined
 import myComponent'../../myLib/dist/myLib.umd.js' 
 // see picture below
 import * as myComponent'../../myLib/dist/myLib.umd.js'

最后一个变体给了我这个：

我的 component.vue 有效（太大无法显示）

【参考方案1】：

您好，我将 dist 目录粘贴到 node_modules/myLib 下，然后将我的包与 import MyComponent from 'myLib' 一起使用

（或者，如果 npm 抱怨找不到你的库，你可以在 npm 上发布它，如果将它作为公共包没有问题的话）。

【讨论】：

您好，感谢您的帮助。你有一点误解，我有一个方便的工具来开发本地包：yalc（虽然我没有使用它，因为我的代码不起作用，我在顶部写的）。但事实是，如果我从dist/myLib.umd.js 导入，我无法导入我的组件如果我从./src/component.vue 导入，一切都很好！

好吧对不起，也许这很愚蠢，但你确定你的相对路径是正确的吗？ （如果最后一次导入有效，则应该是这样）无论如何，您可以考虑使用别名，如here 所解释的那样，希望对您有所帮助！

我在这里创建了另一个问题，看起来vue-cli-service 无法正常工作