[Vue warn]：无法解决组件和 tsconfig 错误

Question

基本上，我创建了一个名为“SelecionarIngredients”的组件，并将其导出到组件“ConteudoPrincipal”。但是，浏览器会抛出 Vue 警告错误，表示无法解析该组件。我尝试更新配置文件，如 vite.config.ts 和所有 tsconfig 文件，但随后它找不到其他组件并在 tsconfig 文件中创建新的错误。我尝试了 npm 更新、json 更新，但没有任何效果。知道为什么浏览器无法解析此组件并将其显示在屏幕上吗？

**主要成分： **

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

export default defineComponent({
  data() {
    components: {
      SelecionarIngredientes;
    }
  },
});
</script>

<template>
  <main class="conteudo-principal">
    <SelecionarIngredientes />
  </main>
</template>

// **组件正在导出，运行 npm run dev 时找不到 **

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

export default defineComponent({
  name: "SelecionarIngredientes",
});
</script>

我尝试更新 vite.config 和 tsconfig 文件，但没有成功

**Vite.config文件：**

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [vue(), tsconfigPaths()],
});

**tsconfig 文件 **

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.css"
  ]
}

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.node.json

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

Answer 1

该问题与组件模块无关。如果模块无法解析和导入，则构建失败并且不会有 Vue 警告。

该问题缺乏具体警告，但可以安全地假设没有

SelecionarIngredientes

不是未注册的组件。

它被错误地提供在组件

data

中，而它应该在

components

中：

export default defineComponent({
    components: {
      SelecionarIngredientes
    }
});