1

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

src/main.ts:15:17 - 错误 TS1131：需要属性或签名。

15 app.component（组件[key].name，组件[key]）；

一点背景知识，我所拥有的所有组件都是基于文档和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 注册一组全局组件以生成应用程序的构建版本的最佳过程是什么。

4

2 回答 2

1

我通过删除来解决它vue-tsc --noEmit &&

于 2021-04-25T12:22:51.217 回答
0

我以这种方式解决了它，但不确定这是使用 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]);
}
于 2021-03-29T19:50:04.673 回答