vue-cli 从组件构建一个库并导入它答案

【问题标题】：vue-cli build a lib from component and import itvue-cli 从组件构建一个库并导入它
【发布时间】：2019-01-17 06:08:46
【问题描述】：

我正在使用 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://i.stack.imgur.com/xHSzL.png
import * as myComponent'path-to-myLib/dist/myLib.umd.js'

我不明白问题出在哪里。

【问题讨论】：

为了导入一个库，它必须首先从你的 main.js 或 mylib.umd.js 中导出。您应该在该文件中包含（导入） .vue 组件，然后从那里导出它。在此处查看我的答案一如何导入 vue 组件：stackoverflow.com/questions/47754244/…
试试export { foobar }
你给你的组件起名字了吗？这是必需的。 Component.vue 应该具有 name 属性，其中包含您尝试导入的组件的值
我的意思是在你的component.vue 里面，就像这个例子中的github.com/samayo/vuejs-hello-app/blob/master/src/components/…。如果不检查我以前的链接或 github 代码，SO 链接显示了如何制作 lib 的分步过程，并且 github 代码显示了成品。您可以镜像检查您的代码以查看缺少的内容
啊，对不起。希望我能提供帮助，但我在构建库时遇到了同样的问题，所以你的问题并没有那么远

标签： javascript vue.js vuejs2 vue-component vue-cli

【解决方案1】：

无论您想在哪里使用您构建的组件，只需像这样导入它：

import MyComponent from 'path/to/MyComponent.umd.js'

你的尝试中没有提到这个语法，所以我猜这只是一个 import 语句的错字。

【讨论】：

我不小心在代码示例中没有写from。我在 2 年前尝试过这个选项，但没有成功。

【解决方案2】：

你必须像这样将 main 添加到你的 package.json "main":"myLib/dist/myLib.umd.js 的路径", 指向生成的 umd 文件，然后使用 import {component} from 'library' 并在库库名称中使用

【讨论】：