在 Vue 中保留 <span> 之间的空格

Question

在我的 Vue 3 应用程序中，我想突出显示文本中的单词，例如以下 HTML 中的单词：

span {
  background-color: yellow;
}

<span>foo</span> 
<span>bar</span> 
baz 
qux

然而，Vue 删除了标签之间的空格，因此 s 之间的间隙<span>消失了：

span {
    background-color: yellow;
}

<span>foo</span><span>bar</span> baz qux

如何保留<span>s 之间的空白？我无法使用 ，因为空格应该被打破，并且其他空白实体都没有与通常空间相同的大小。

Answer 1

IMO 这完全是一个错误，因为：

1. 原生 html 的行为方式不同。
2. 文档中的行为应默认保留空格。
3. vue 2没有这个问题。

有一个 vuecompilerOptions选项whitespace，根据文档，它应该默认为'preserve'，但事实并非如此。

要在 webpack 中设置它，'preserve'请使用以下配置：

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        compilerOptions: {
            // preserve is supposed to be the default
            // see: https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options
            // but as of 2022-01-13 (vue 3.2.26)
            whitespace: 'preserve',
        },
    },
},

或者，如果您要动态渲染组件（使用 dom 模板），请使用以下命令：

const app = Vue.createApp({...});
app.config.compilerOptions.whitespace = 'preserve';
app.mount('#app');

文档（在撰写本文时）：

whitespace

• 类型：字符串
• 有效值：“保留”| '凝结'
• 默认值：“保留”

默认值'preserve'按如下方式处理空格：

• 元素标签之间的纯空白文本节点被压缩为单个空格。
• 所有其他空白均按原样保留。

如果设置为'condense'：

• 如果元素标签之间的纯空白文本节点包含新行，则该节点将被删除。否则，就会被压缩成一个空间。
• 非纯空白文本节点内的连续空白将压缩为单个空格。

使用压缩模式将导致编译后的代码大小更小并且性能略有提高。然而，在某些情况下，与纯 HTML 相比，它会产生细微的视觉布局差异。

Answer 2

好吧，显然，我不是第一个偶然发现这种行为的人，我将其命名为错误：

https://github.com/vuejs/vue-next/pull/1600

默认情况下，Vue 会出于压缩目的删除元素之间的空格 - 浏览器除外，浏览器会将此类空格减少为单个空格。在 Vue 2 中，可以更改配置以保留空格。在 Vue 3 中这是不可能的（目前）。

然而，有一些解决方法，正如评论 [1] 中提到的，只有包含换行符的空格才会被删除。因此，通过删除上面示例源代码中的换行符，该代码片段的行为符合预期：

<span>foo</span> <span>bar</span> 
baz
qux

[1] https://github.com/vuejs/vue-next/pull/1600#issuecomment-747162894