javascript - 如何在另一个 Vue 项目中使用 Vue Web 组件(由 Vue-CLI 3 生成)？

Question

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

<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说:

In web component mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. The bundle will assume Vue is available on the host page as a global variable.

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

你有什么想法吗？

Answer 1

事实上你引用的声明意味着你不需要使用import Vue from 'vue' . Vue 可以用作全局变量，因为它已由脚本添加 <script src="https://unpkg.com/vue"></script>.