个人 Vue 3 组件包缺少模板或渲染功能

问题描述

我最近将我自己的 Vue 3 组件上传到 NPM，以使其可供其他人使用。在其他项目中使用它时，它会发出以下警告：

[Vue warn]: Component is missing template or render function. 
at <Vuetoggle id="1" title="Toggle me" > 
at <App>

发生这种情况的原因可能是什么？我构建和发布应用的方式是运行此代码。

import Vuetoggle from "./components/Vuetoggle";

export default {
    install(app) {
        app.component("vue-toggle",Vuetoggle);
    }
};

然后在我的 package.json 中运行这个构建命令：

"build-library": "vue-cli-service build --target lib --name vue-toggle-component ./src/install.js",

我如何在不同的项目中使用我的组件：

<template>
  <Vuetoggle id="1" title="Toggle me"/>
</template>

<script>
import Vuetoggle from 'vue-toggle-component';

export default {
  name: 'App',components: {
    Vuetoggle,}
}
</script>

组件本身：

<template>
  <section class="wrapper" :class="{dark: darkTheme}" :title="title">
    <input
      :id="id"
      :name="name"
      v-model="toggleState"
      class="toggle"
      type="checkBox"
      @click="toggleState = !toggleState"
    />
    <label :for="id" class="toggler" :style="[toggleState && {'background': activeColor}]"/>
    <span class="title" v-text="title" @click="toggleState = !toggleState"/>
  </section>
</template>

<script>
export default {
  name: 'Vuetoggle',props: {
    activeColor: {type: String,default: '#9FD6AE'},darkTheme: {type: Boolean,default: false},id: {type: String,required: true},name: {type: [String,Boolean],title: {type: String,toggled: {type: Boolean,},data() {
    return {
      toggleState: this.toggled
    }
  },}
</script>

包裹：https://www.npmjs.com/package/vue-toggle-component

解决方法

以下内容涉及使用 Vue 3 和 Typescript 创建的新项目，该项目使用 Quasar CLI（v2 测试版）创建。虽然我收到 OP 报告的相同错误，但我的源布局可能会有所不同，因为我没有使用单文件组件。

[Vue 警告]：组件缺少模板或渲染函数。

我通过指定 vue 文件作为组件源解决了上述问题。我通常将组件拆分为单独的 vue 和 ts 文件。

相关片段：

MyComponent: require("./components/My.vue").default

上下文：

export default defineComponent({
  name: "App",components: {
    MyComponent: require("./components/My.vue").default
  },setup() {
  ...

为了让短毛猫安静下来，我有以下 es-lint 条评论

export default defineComponent({
  name: "App",components: {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-var-requires
    MyComponent: require("./components/My.vue").default
  },

理想情况下，将使用 import 语句代替内联 require 赋值。

,

当你使用你的组件时，更换

import VueToggle from 'vue-toggle-component';

与

import VueToggle from 'vue-toggle-component.vue';

或者如果组件用户使用 webpack，他们可以在 config 中指定：

resolve: {
    extensions: ['.vue','.ts','.js']
}