Svelte 组件脚本位置错误：items 未定义之根源与正确写法

作者：袖梨 2026-06-19

Svelte 中变量在模板中不可用，通常是因为 <script> 标签未置于组件顶层——它必须作为 Svelte 组件的根级脚本块存在，而非嵌入 HTML 的 <body> 或 <head> 内；否则将退化为普通浏览器脚本，无法参与响应式绑定。

svelte 中变量在模板中不可用，通常是因为 `<script>` 标签未置于组件顶层——它必须作为 svelte 组件的根级脚本块存在，而非嵌入 html 的 `<body>` 或 `<head>` 内；否则将退化为普通浏览器脚本，无法参与响应式绑定。</script>

在你提供的代码中，<script lang="ts"> 被错误地放置在 <body> 标签内部（且紧邻 <div class="header"> 之后），这导致 Svelte 编译器完全忽略该脚本块——它不会被识别为组件逻辑的一部分，因此声明的 items 变量对模板 {#each items as item} 来说是“未声明”的，编译时报错 Cannot find name 'items'。

✅ 正确做法：Svelte 组件必须遵循严格的三段式结构（顺序可调，但必须独立、同级）：

<script lang="ts">  // ✅ 此处声明的变量/状态可在下方模板中直接使用  let items = [    { name: "test" },    { name: "potato" },    { name: "io" }  ];</script><!-- ✅ 模板区域：支持 {#each}、bind:value、事件处理等 --><div class="header">  <a href="/"><b>Pot.Io</b></a>  <a href="/shop"><b>Shop</b></a>  <a href="/help"><b>Help</b></a></div><div class="cnt1">  {#each items as item}    <div class="item">      <h1>{item.name}</h1>    </div>  {/each}</div><style>  /* ✅ scoped CSS：仅作用于当前组件 */  .header {    background-color: #Dcd517;    padding: 5px 5px 5px 20px;    font-family: 'Roboto', sans-serif;    display: flex;    justify-content: center;    margin: 0;  }  .header a {    color: black;    padding: 20px;    text-decoration: none;    border-radius: 12px;    font-size: 32px;  }  .header a:hover {    background-color: #9d940e;  }  .cnt1 {    display: flex;    background-color: #127D0B;    padding: 8px 50px;  }  .item {    margin: 0 8px;  }</style>

⚠️ 关键注意事项：

禁止在 <body> 或 <head> 中写 <script>：Svelte 不是 HTML 文件处理器，而是组件编译器。所有逻辑必须位于 .svelte 文件顶层 <script> 块中。
样式应移至 <style> 块：内联 <style> 在 <head> 中会被忽略或引发 SSR/SSG 兼容性问题；Svelte 的 <style> 自动作用域化，更安全、更可维护。

全局资源（如字体）请用 <svelte:head>：

<svelte:head>  <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed:wght@300;400&display=swap" rel="stylesheet"></svelte:head>

若需复用数据，推荐 export let items 作为 prop：适用于父组件传入数据的场景；而本例中 items 是本地状态，直接 let items = [...] 即可（Svelte 5+ 中建议配合 $state() 提升响应式可靠性，例如 let items = $state([{name: "test"}]);）。

总结：Svelte 的“魔法”依赖于其约定式结构。把 <script> 放回组件顶层，移除冗余 HTML 包裹，即可让变量自然暴露给模板——这是理解 Svelte 响应式模型的第一课，也是避免 90% 初学者编译错误的基石。