Svelte 组件未渲染的常见原因：命名规范与显式导入缺失-html教程-PHP中文网

Svelte 中组件不会自动渲染，必须严格遵循命名规范（PascalCase）并显式导入使用；Footer.svelte 若未在父组件中 import 且正确引用，将完全不参与 DOM 构建。

svelte 中组件不会自动渲染，必须严格遵循命名规范（pascalcase）并显式导入使用；`footer.svelte` 若未在父组件中 `import` 且正确引用，将完全不参与 dom 构建。

你的 Footer.svelte 文件本身结构完整、语义清晰，样式和内容均无语法错误——问题不在于组件内部，而在于其未被接入渲染流程。这是 Svelte 新手最易忽略的核心机制：Svelte 不像传统 HTML 那样“包含即显示”，所有自定义组件都必须显式导入、声明并实例化。

✅ 正确做法：两步缺一不可

重命名组件文件为 PascalCase
Svelte 官方约定及构建工具（如 Vite/SvelteKit）默认将 .svelte 文件视为 ES 模块导出，默认导出名与文件名强绑定。若文件名为 footer.svelte，则模块默认导出名为 footer（小写），而你在模板中若写
，Svelte 会查找未定义的 Footer 变量，导致静默失败（无报错但不渲染）。
✅ 正确操作：
```
mv src/lib/Footer.svelte src/lib/Footer.svelte  # 确保已是大写开头
# 或从 footer.svelte → Footer.svelte
```

在使用处显式导入并声明组件变量
观察你 main.svelte 中已有的成功案例：

<script>
  import Step from "./Step.svelte"; // ✅ 正确：导入并赋值给 PascalCase 变量
</script><step></step>

同理，你需要为 Footer 补充相同逻辑：

<script>
  import Step from "./Step.svelte";
  import Footer from "./Footer.svelte"; // ✅ 新增：导入 Footer 组件
</script><!-- 在 main 的末尾（</main> 闭合标签前）插入 --><footer></footer>

⚠️ 注意：路径需准确。若 Footer.svelte 与 main.svelte 同级，用 "./Footer.svelte"；若在 src/lib/ 下，用 "../lib/Footer.svelte" 或按你的别名配置（如 $lib/components/Footer.svelte）。

? 排查补充建议

检查控制台是否有 ReferenceError: Footer is not defined
若存在该错误，直接证实是未导入；若无任何错误但也不渲染，则极大概率是文件名大小写不匹配（尤其在 macOS/Linux 文件系统不区分大小写，但构建工具严格区分）。
验证构建产物是否包含 Footer 代码
运行 npm run build 后查看 build/client/_app/chunks/（SvelteKit）或 dist/（普通 Svelte）中是否有 Footer-xxx.js，无则说明未被依赖图捕获——根源仍是未导入。
避免常见陷阱
- ❌ 不要试图用
  原生标签替代
  组件（语义与功能完全不同）；
- ❌ 不要在 app.html 中直接 script 引入 .svelte 文件（Svelte 组件非普通 JS，需编译）；
- ❌ 不要省略 import 直接写
  （Svelte 不支持全局组件注册）。

✅ 最终推荐结构（main.svelte 片段）

<script>
  import Step from "./Step.svelte";
  import Footer from "./Footer.svelte"; // ← 关键新增行
</script><main class="flex flex-col flex-1 p-4"><!-- 你原有的所有 section 内容 --><!-- ... --></main><footer></footer><!-- ← 放在 </main> 外部，作为独立区块 -->

完成以上修改后重新构建部署，Footer 将立即正常渲染。这不仅是解决当前问题的关键，更是掌握 Svelte 组件化开发范式的基石：显式依赖、约定优于配置、零魔法但高可控性。