Question

这个问题可以通过修复打字稿错误或如何最好地处理全球 Vue 3 组件与打字稿的注册来回答。简而言之，如果我运行 npm run dev (vite)，开发服务器运行良好并且没有问题。尝试通过 npm run build (vue-tsc --noEmit && vite build) 生成构建时，发生以下错误：

<块引用>

src/main.ts:15:17 - 错误 TS1131：预期的属性或签名。

15 app.component(Components[key].name, Components[key]);

一点背景知识，我所有的组件都是基于 documentation 和 defineComponent 的使用创建的。下面是一个例子。在某些时候，需要全局注册多个组件，因为它们会在整个应用程序中使用。

<script lang="ts">
//sbutton.vue
import { defineComponent } from "vue";

export default defineComponent({
  name: "s-button",
  props: {
    disabled: {
      default: false,
      type: Boolean
    },
    loading: {
      default: false,
      type: Boolean
    }
  },
  computed:{
    disableBtn(): Boolean {
      return this.loading || this.disabled;
    }
  }
});
</script>

我将全局组件合并为一个对象，我可以运行并全局注册。

// components/index.ts

import BlogSubscribe from './BlogSubscribe.vue';
import SButton from './SButton.vue';

const components = {
    BlogSubscribe,
    SButton
};

export default components;

最后在 main.ts 中全局注册它们：

import Components from './components';

const app = createApp(App).use(router);

for (const key in Components) {
  app.component(Components[key].name, Components[key]);  // <- error here
}

总结一下，使用 vue3、vite、typescript 注册一组全局组件以生成应用程序的构建版本的最佳过程是什么。

Answer 1

我通过这种方式解决了这个问题，但不确定它是使用 vite/vue3 处理全局 vue 组件注册的最佳或推荐方法。

const components:{[index:string]: Component<any, any, any, ComputedOptions, MethodOptions>} = {
   [BlogSubscribe.name]: BlogSubscribe,
    [SButton.name]: SButton
};

export default components;

在 main.ts 中：

for (const key in Components) {
  app.component(key, Components[key]);
}

Answer 2

我删除了vue-tsc --noEmit &&

Vite 构建和 Global Vue 3 组件通过 Typescript

2 个答案: