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

Question

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

span {
background-color: yellow;
}

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

然而，Vue删除了标签之间的空白，因此<span>之间的空白消失了:

span {
background-color: yellow;
}

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

如何保留<span>s之间的空白?我不能使用 ，因为空格应该中断，并且没有其他空白实体具有与通常空格相同的大小。

Answer 1

在我看来这完全是一个bug，因为:

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

有一个名为whitespace的vuecompilerOptions选项，根据文档应该默认为'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'
• 默认:"保护">

默认值'preserve'处理空格的方式如下:

• 元素标签之间的纯空白文本节点被压缩成单一空间。
• 所有其他空格保持原样

如果设置为'condense':

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

使用冷凝模式将导致更小的编译代码大小和略微改进的性能。然而,与普通HTML相比，它将产生较小的视觉布局差异在某些情况下

Answer 2

很明显，我不是第一个遇到这种行为的人，我将其命名为bug:

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