Nuxt/Vue 3模板空白字符被吞噬？是Bug还是特性？

这既不是Bug，是Vue（Nuxt3基于Vue3）模板编译的默认特性，和你修改的TypeScript配置完全无关。

为什么会出现这种差异？ #

Vue的模板编译器会自动忽略元素标签之间的空白字符（包括换行、空格、制表符），目的是减少DOM中的冗余空白节点，优化渲染性能。而纯文本节点之间的空白会遵循HTML原生规则被合并为单个空格，所以你会看到纯文本换行有空白，标签换行却没有。

你调整的tsconfig.json里的compilerOptions.whitespace是TypeScript的代码编译配置，只针对TS语法处理生效，和Vue模板的空白渲染逻辑完全不相关，所以修改后没有效果。

解决方法 #

如果需要让两个<a>标签之间显示空白，有几种常用方式：

• 直接在标签之间添加显式空格：

  <a>AAA</a> <a>BBB</a>
  

• 使用Vue的v-pre指令，让Vue跳过这段内容的空白编译（注意不要覆盖其他需要编译的内容）：

  <span v-pre>
    <a>AAA</a>
    <a>BBB</a>
  </span>
  

• 更推荐的方案：用CSS控制间距，实现结构与样式分离，比如给后续<a>标签添加左侧外边距：

  <template>
    <a class="nav-link">AAA</a>
    <a class="nav-link">BBB</a>
  </template>
  
  <style>
  .nav-link + .nav-link {
    margin-left: 8px;
  }
  </style>
  

内容的提问来源于stack exchange，提问作者MarrekNožka