Vue组件解析失败求助：SelecionarIngredientes组件无法正常引入

问题场景 #

创建SelecionarIngredientes组件后，在ConteudoPrincipal组件中引入使用时，浏览器抛出Vue警告，提示无法解析该组件。尝试更新vite.config.ts及所有tsconfig配置文件后，不仅未解决问题，反而出现其他组件无法找到、tsconfig文件产生新错误的情况，执行npm update也无效果。

相关代码 #

主组件（ConteudoPrincipal.vue） #

<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>

被引入组件（SelecionarIngredientes.vue） #

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

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

Vite.config.ts #

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

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

tsconfig.json #

{
  "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"]
  }
}

核心问题及修复方案 #

1. 组件注册位置错误（关键原因） #

你在defineComponent配置中将components选项嵌套在了data函数内部，违反了Vue组件的配置结构规则。components应该与data同级，而非作为data的内部属性。同时data函数必须返回一个对象，原代码缺少返回逻辑。

修正后的主组件script代码：

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

export default defineComponent({
  // components与data同级
  components: {
    SelecionarIngredientes
  },
  data() {
    // data必须返回对象
    return {};
  },
});
</script>

2. 配置回退与验证 #

• 之前修改vite和tsconfig配置导致的额外错误，建议回退到修改前的版本，先解决组件注册的核心问题。你的原始配置本身没有明显问题，无需额外调整。
• 确认两个组件文件在同一目录下，文件名大小写完全一致（部分环境区分大小写，避免因大小写不匹配导致的找不到文件问题）。

3. 额外排查步骤 #

• 执行npm run dev -- --force强制清除Vite缓存并重启开发服务器，避免缓存导致的异常。
• 检查组件名、文件名的拼写是否完全一致，排除拼写错误的可能。

内容的提问来源于stack exchange，提问作者Samuel Rodrigues