Vue使用Pug模板时Mustache语法的替代方案是什么？

你遇到的这个问题太常见了——Pug的解析规则会把{{}}当成普通文本的一部分，而非Vue的插值语法，所以才会抛出unexpected text "{{"的错误。下面给你几个可行的替代方案，按需选择：

1. 使用Pug的原生插值语法（推荐） #

Pug本身支持用=做变量插值，效果和Mustache语法完全一致，而且写法更简洁：

template(lang='pug')
  Window
    template(v-slot:title)= title

如果你的内容包含HTML标签需要直接渲染（对应Vue的v-html），可以用!=：

template(lang='pug')
  Window
    template(v-slot:title)!= richTitle

2. 使用Vue的v-text指令 #

如果你更习惯Vue原生指令的写法，v-text是Mustache语法的完美替代，它明确表示要绑定文本内容，可读性更强：

template(lang='pug')
  Window
    template(v-slot:title)
      span(v-text='title')

这里用span包裹是因为template插槽容器本身不会渲染成DOM元素，需要一个载体来应用v-text。

3. 使用Pug的管道符|保留Mustache语法 #

如果你坚持想用Mustache的写法，可以在文本前加上管道符|，告诉Pug这是纯文本内容，不要解析里面的语法：

template(lang='pug')
  Window
    template(v-slot:title)
      | {{title}}

这种方式适合需要写复杂表达式（比如{{ count + 1 }}）或者多个插值的场景，管道符能让Pug跳过解析，直接把内容交给Vue处理。

这几个方案都能解决你的编译错误，根据自己的编码习惯选就行～

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