Vue 3中如何保留span标签内的空格？

问题还原 #

Vue2中以下代码的空格可正常保留，升级到Vue3后图标与购物车名称直接拼接（无空格）：

<span class="glyphicon glyphicon-shopping-cart"></span><span v-cloak>  {{cartName}}</span>

已尝试设置app.config.compilerOptions.whitespace = 'preserve'或'condense'无效，硬编码替换{{cartName}}时空格显示正常，说明插值表达式前的空格被Vue3修剪。

可行解决方案 #

• 用非换行空格替代普通空格：将模板中的普通空格替换为 ，Vue不会修剪实体字符：

  <span class="glyphicon glyphicon-shopping-cart"></span><span v-cloak>&nbsp;&nbsp;{{cartName}}</span>
  

• 在插值表达式中拼接空格：把空格和变量合并成一个表达式，确保空格被包含在输出内容中：

  <span class="glyphicon glyphicon-shopping-cart"></span><span v-cloak>{{'  ' + cartName}}</span>
  

• 使用CSS控制间距（推荐）：通过样式分离的方式设置图标与文本的间距，比空格更可控：

  <span class="glyphicon glyphicon-shopping-cart icon-margin"></span><span v-cloak>{{cartName}}</span>
  

  .icon-margin { margin-right: 0.5em; }
  

• 使用v-text指令渲染：v-text会直接渲染完整文本内容，保留空格：

  <span class="glyphicon glyphicon-shopping-cart"></span><span v-cloak v-text="'  ' + cartName"></span>
  

原因说明 #

Vue3的app.config.compilerOptions.whitespace配置仅作用于标签之间的空格处理，对插值表达式（{{}}）内部及相邻的文本空格不生效。插值时Vue会自动合并相邻文本节点并修剪冗余空格，而硬编码文本属于纯文本节点，不会被修剪。

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