innerHTML赋值清空空标签内所有空白 Vue渲染后无法保留该如何解决

问题原因 #

你遇到的空白丢失是Vue模板编译的默认空白字符处理策略导致的：Vue默认启用whitespace: 'condense'配置，会自动移除标签内仅包含空白的文本节点、折叠标签首尾的连续空白字符，哪怕你赋值innerHTML时空白还存在，经过Vue编译后也会被清理。

可行解决方案 #

方案1：修改Vue编译全局配置（适配所有动态模板） #

• Vue 2 全局配置：

Vue.config.whitespace = 'preserve'

• Vue 3 全局配置（初始化实例时传入）：

const app = createApp({
  // 根组件配置
}, {
  compilerOptions: {
    whitespace: 'preserve'
  }
})

该配置会让Vue保留模板中所有空白字符，不会主动清理。

方案2：用CSS精准控制（无需修改全局配置，更推荐） #

给需要保留空白的标签添加white-space属性即可，浏览器会保留元素内的空白字符，不会被默认折叠：

span.b {
  /* 保留空白同时允许正常换行 */
  white-space: pre-wrap;
  /* 如果不需要换行可以用 pre */
  /* white-space: pre; */
}

该方案无需修改业务逻辑和Vue配置，只针对需要保留空白的元素生效，侵入性最低。

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