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 未定义

连续

module.exports = Vue;

但Vue CLI 3 文档说：

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

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

Answer 1

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

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

注意路径应该指向导入的vue文件，而不仅仅是指向文件夹。但必须跳过扩展名“vue”。最终的应用程序将把它们构建在一起。