vue.js - Vue 未定义在独立的 Web 组件中

Question

我正在构建一个独立的 Vue 组件并在另一个 Vue 项目中使用它。
构建组件:

vue build --target wc --inline-vue --name user-menu user-menu.vue

到目前为止，它是一个简单的组件，没有功能，只有标记。
然后，在 package.json 的主项目中:

  "devDependencies": {
    "user-menu": "git+https://........user-menu.git",

然后，在 main.js 中:

import Vue from "vue";
import UserMenu from "user-menu"
....
Vue.use(UserMenu);
const app = new Vue(config).$mount("#root");
window.app = app;
Vue.use(UserMenu);

它说:

user-menu.js?e2ea:1446 Uncaught ReferenceError: Vue is not defined

连续

module.exports = Vue;

但是 Vue CLI 3 documentation说:

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

知道如何解决这个问题吗？

Answer 1

最后我得出了以下解决方案:根本不应该构建组件。源文件足以像这样导入:

import UserMenu from "user-menu/user-menu";

注意路径要指向导入的vue文件，不能只指向文件夹。但是必须跳过扩展名“vue”。
最终的应用程序将把它全部构建起来。