Vue 没有在独立的 Web 组件中定义答案

【问题标题】：Vue is not defined in a standalone web componentVue 没有在独立的 Web 组件中定义
【发布时间】：2021-02-25 10:59:33
【问题描述】：

我正在构建一个独立的 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 说：

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

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

【问题讨论】：

我认为捆绑为 web 组件的组件不能在 vue 项目中使用，尝试使用 vue-cli-service build --target lib --name myLib [entry] 将其构建为普通 vue 组件
感谢您的回答@BoussadjraBrahim 您能告诉我如何在 vue 应用程序中使用此类库吗？像往常一样“import .. form ..”不起作用。

标签： vue.js web-component

【解决方案1】：

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

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

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

【讨论】：