使用Pug作为Svelte模板引擎时each循环迭代报错如何解决

问题原因 #

你遇到的报错是因为Pug预处理器会优先解析模板内的语法，{#each} 是Svelte原生语法，直接写在Pug模板里会被Pug识别为非法字符，无法完成解析，所以抛出异常。

解决步骤 #

1. 确认依赖与基础配置

首先确保你已经安装了所需依赖：
npm install pug svelte-preprocess --save-dev

同时在svelte.config.js中开启Pug预处理支持，配置参考：

import preprocess from 'svelte-preprocess';

const config = {
  preprocess: preprocess(),
  // 其余项目配置保持不变
};

export default config;

2. 修改Pug模板写法

有两种通用写法可以正确兼容Svelte逻辑块：

• 第一种（管道符原样输出法，兼容性最好）
  在Svelte逻辑块的行首加|，让Pug将这部分内容原样输出给Svelte解析，修改后的模板代码：

<template lang="pug">
| {#each cats as cat}
  p {cat.name}
| {/each}
</template>

• 第二种（预处理器适配写法，更简洁）
  svelte-preprocess对Svelte逻辑块做了语法适配，可以用+前缀代替大括号包裹，写法如下：

<template lang="pug">
+#each cats as cat
  p {cat.name}
+/each
</template>

变量插值部分也可以直接用Pug的原生赋值写法，p= cat.name 和 p {cat.name} 效果完全一致。

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