如何在另一个 Vue 项目中使用 Vue Web 组件（由 Vue-CLI 3 生成）？答案

【问题标题】：How to use Vue web components (generated by Vue-CLI 3) inside another Vue project?如何在另一个 Vue 项目中使用 Vue Web 组件（由 Vue-CLI 3 生成）？
【发布时间】：2019-02-10 04:49:47
【问题描述】：

我可以将 Vue-CLI 3 构建命令 (vue-cli-service build --target wc --name foo ./src/App.vue) 生成的 web 组件用作独立的像这样的网页中的组件：

<script src="https://unpkg.com/vue"></script>
<script src="./foo.js"></script>

<foo></foo>

但是当我在另一个 Vue 项目中导入这个组件时：

import Vue from 'vue'
import foo from 'foo'

我收到此错误：

Uncaught ReferenceError: Vue is not defined

Vue CLI 3 documentation 说：

在 web 组件模式下，Vue 是外化的。这意味着即使您的代码导入了 Vue，该包也不会捆绑 Vue。该包将假定 Vue 在主机页面上作为全局变量可用。

但是当你想在另一个项目中使用 web 组件时，它并没有说明如何解决这个问题。

你有什么想法吗？

【问题讨论】：

尝试从 npm 安装 vue。 npm install vue
@RuChernChong 我之前安装了它，它工作正常！此错误仅针对此特定组件。
所以你在另一个组件中有一个全局import Vue from 'vue' 和另一个import Vue from 'vue'？
@RuChernChong 是的，但无论是否导入 Vue，我都会收到此错误。
您应该使 vue 可用于 WebComponent 使用的窗口 ` import Vue from 'vue';窗口.Vue = Vue; ` 你也可以在你的 webpack 配置中将 vue 设为外部，然后在外部包含脚本。Web 组件并不适合在 webpack 项目中导入，最好直接使用 UMD 模块或源代码

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

【解决方案1】：

其实如果你想在 vue-cli 构建的另一个项目中使用组件，首先你应该有一个 index.js（或任何其他名称），在该文件中导出组件，如

export {default as Button} from './button/button'
export {default as ButtonGroup} from './button/button-group'
export {default as Cascader} from './cascader/cascader'

然后更改 package.json 'vue-cli-service build --target wc --name foo ./src/index.js' 中的 'scripts' 你可以将 dist 目录复制到新项目的 node_modules 中，然后使用它（但不推荐）。你可以使用 'npm publish' 它，在你的新项目中，使用 npm 安装它

【讨论】：

【解决方案2】：

实际上你引用的语句意味着你不需要使用import Vue from 'vue'。 Vue已经被脚本<script src="https://unpkg.com/vue"></script>.添加，可以作为全局变量使用

【讨论】：

这是两个不同的用例！我在我的项目中导入了 Vue，它工作正常。此错误仅针对此组件。
那么你在 foo 组件的声明中包含 import Vue from 'vue' 吗？