Vue 3 SFC Composition API组件无法渲染，本地环境异常求助

1. 入口挂载逻辑校验 #

确认main.ts里的Vue实例创建与挂载流程：

• 必须正确导入createApp和App.vue，并执行mount('#app')，示例代码：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

• 核对index.html中的挂载容器div的id是否为app，无拼写错误

2. 组件注册与使用细节 #

• 在App.vue的<script setup lang="ts">中，确保组件导入路径正确，比如：

  <script setup lang="ts">
  import HeaderComponent from './components/HeaderComponent.vue'
  </script>
  

• 模板中使用组件时，大驼峰命名可直接用（<HeaderComponent>）或转短横线（<header-component>），避免语法错误
• 检查组件文件后缀为.vue，不要误写为.ts

3. TypeScript配置排查 #

• 打开tsconfig.json，检查compilerOptions：
  • module需设为ESNext/ES6，适配Vue模块导入
  • 若开启strict: true，查看终端编译输出，是否有未修复的类型错误（比如props类型定义错误），这类错误可能导致组件编译失败但不终止进程
• 确认include字段包含src目录，避免TS忽略组件文件

4. ESLint/Prettier规则冲突检查 #

• 查看ESLint输出日志，是否存在vue/no-unused-components误报，导致组件被Tree Shaking移除
• 临时在构建配置中关闭ESLint插件，验证组件是否能渲染，以此确认是否是ESLint规则导致的问题
• 检查Prettier是否修改了组件代码的语法（比如自动格式化导致的标签闭合错误）

5. 依赖与构建工具问题 #

• 核对package.json中依赖版本：vue需为3.x，@vue/compiler-sfc、vite/vue-cli版本需与Vue兼容
• 删除node_modules、package-lock.json，执行npm install重新安装依赖，清除缓存
• 检查构建配置文件（vite.config.ts/vue.config.js），确认路径别名、插件配置无错误，避免组件导入路径解析失败

6. 浏览器控制台深度排查 #

• 打开Chrome控制台的Console标签，切换到Verbose级别，查看是否有隐藏的JS错误（比如组件内部语法错误、导入404）
• 查看Network标签，确认.vue组件文件是否正常加载，无404或加载失败情况

内容的提问来源于stack exchange，提问作者To Code Or Not To Code