Webpack 抱怨 Vue 组件类型为“任意”答案

【问题标题】：Webpack complaining about Vue component type being "any"Webpack 抱怨 Vue 组件类型为“任意”
【发布时间】：2021-07-29 01:06:25
【问题描述】：

使用 ts 4.2.4 和 Vue3 我在构建我的 vue 项目时遇到了这个奇怪的错误：

> admin.pacc@0.1.0 build
> vue-cli-service build


⠋  Building for production...

 ERROR  Failed to compile with 1 error                                                                                                                                                                                  17:36:51

 error  in src/layout/Main.vue:52:20

TS7016: Could not find a declaration file for module './Footer.vue'. '/Users/ddruganov/VSCodeProjects/admin.pacc/src/layout/Footer.vue.js' implicitly has an 'any' type.
    50 | <script lang="ts">
    51 | import Topbar from "./Topbar.vue";
  > 52 | import Footer from "./Footer.vue";
       |                    ^^^^^^^^^^^^^^
    53 | import Sidebar from "./Sidebar.vue";
    54 |
    55 | import { activityStore, LOAD_ACTIVITIES } from "@/store/modules/activity.store";

 ERROR  Build failed with errors.
npm ERR! code 1
npm ERR! path /Users/ddruganov/VSCodeProjects/admin.pacc
npm ERR! command failed
npm ERR! command sh -c vue-cli-service build

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ddruganov/.npm/_logs/2021-05-08T14_36_51_736Z-debug.log

Typescript 抱怨我的页脚是 any 类型，而没有抱怨任何其他 .vue 组件
出于某种原因 VSCode 不认为这是一个错误：
您可以看到页脚没有波浪线
页脚代码：

<template>
  <footer class="footer bg-light border-top p-3">
    <span class="text-muted">{{ fullYear }} pAcc</span>
  </footer>
</template>

<script land="ts">
import { Vue } from "vue-class-component";

export default class FooterComponent extends Vue {
  get fullYear() {
    return new Date().getFullYear();
  }
}
</script>

我的 shims-vue.d.ts 文件如下：

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

【问题讨论】：

在页脚中，您从 vue-class-component 导入了 vue fn，但是有一个组件装饰器需要从该包中导入。代码：import Vue from 'vue' import Component from 'vue-class-component' // Define the component in class-style @Component export default class FooterComponent extends Vue { get fullYear() { return new Date().getFullYear(); } }希望对您有所帮助！
FWIW，我无法在使用 Vue 3 和 TS 4.2.4 的新 Vue CLI 脚手架项目中重现构建错误。
另外，您似乎在Footer.vue 中有错字（land=ts 应该是lang=ts）。这只是问题中的错字吗？
@tony19 天哪！这正是导致它的错误。这确实是我代码上的一个类型，非常感谢！！！我会将您的答案粘贴为已接受
@GolamrabbiAzad 事情是，在所有其他组件中，我从不使用“@Component”装饰器并且一切正常

标签： typescript vue.js webpack vuejs3

【解决方案1】：

shims-vue.d.ts

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const component: ComponentOptions
  export default component
}

【讨论】：

官方 vue3-cli 创建的应用程序包含具有我上面列出的代码的 shims-vue.d.ts，将 DefineComponent 替换为 ComponentOptions 不会有帮助

【解决方案2】：

@tony19 注意到我的代码中有错字：

另外，您似乎在 Footer.vue 中有错字（land=ts 应该是 lang=ts）。这只是问题中的错字吗？

确实是lang="ts"，问题解决了，项目现在编译

【讨论】：