Vue-cli如何从组件构建库并导入它。

Question

我正在使用vue-cli构建我的库，使用以下命令：

"build": "vue-cli-service build --target lib --name myLib ./src/component.vue"

在构建完成后，如何从dist文件夹中导入我的组件？

如果我从path-to-myLib/src/component.vue导入，一切正常！但是下面的代码不起作用：

// undefined
import { component } from 'path-to-myLib/dist/myLib.umd.js' 
// undefined
import myComponent'path-to-myLib/dist/myLib.umd.js' 
// result: https://istack.dev59.com/xHSzL.webp
import * as myComponent'path-to-myLib/dist/myLib.umd.js'

我无法理解问题所在。

- Илья Зеленько

---

为了导入一个库，它必须首先从您的 main.js 或 mylib.umd.js 导出。你应该在这个文件中包含（import）.vue组件，然后从那里导出它。查看我在此处如何导入vue组件的答案：https://dev59.com/4lYN5IYBdhLWcg3wO2DE#47757050 - samayo

Try export { foobar } - samayo

你给组件命名了吗？这是必须的。Component.vue 应该有一个 name 属性，其值为你要导入的组件的名称。 - samayo

我的意思是在你的 component.vue 文件中，就像这个例子 https://github.com/samayo/vuejs-hello-app/blob/master/src/components/VuejsHelloApp.vue#L9。如果不行的话，请查看我的之前的链接或者 Github 代码，SO 链接展示了如何制作库的逐步过程，而 Github 代码则展示了最终产品。你可以对照你的代码来看看缺少了什么。 - samayo

啊，抱歉。希望我能帮忙，但是在构建库时我也遇到了同样的问题，所以你的问题并不那么远。 - samayo

Answer 1

您需要在package.json文件中添加main字段，例如："main":"path-to-myLib/dist/myLib.umd.js"，指向生成的umd文件，然后使用import {component} from 'library'引入并在库中使用库名。

- giorgiosaud

Answer 2

无论您想在哪里使用您构建的组件，只需像这样导入它： import MyComponent from 'path/to/MyComponent.umd.js' 您尝试的内容中没有提到这种语法，所以我猜测这只是一个导入语句的错别字。

- Alessio Breviglieri

---

我在代码示例中不小心没有写from。我两年前尝试过这个选项，但它没有起作用。 - Илья Зеленько