添加选项以在元素之间保留空格，而不考虑新行(vue-template-compiler)

qlvxas9a 于 2022-10-28 发布在其他

关注(0)|答案(2)|浏览(153)

此功能可解决什么问题？

vue-template-compiler的whitespace选项目前允许preserve和condense（Vue CLI中的默认值）。虽然condense将导致更小的代码大小，但它也打破了一种常见的HTML结构化方式，因为它删除了元素之间的所有空格 *（如果它包含新行 *）。
请添加一个选项，将元素之间的所有空格压缩为一个空格 *，而不管它是否包含新行 *。这样的选项也可能是比condense更好的默认选项，因为它更接近于您对HTML的期望。
使用带有默认condense选项的Vue CLI的示例：

<p>
  <span>1</span> <span>a</span>
</p>

<p>
  <span>2</span>
  <span>b</span>
</p>

<p>
  <span>3</span>
  <span>
    c
  </span>
</p>

这会在浏览器中产生下列输出：
正如您所看到的，2b之间没有空格。虽然这种行为在vue-template-compiler文档中得到了正确的说明，但它并不直观。像2这样构造HTML是非常常见的，没有必要像3那样重新构造它。除了不直观之外，目前很难找出哪一个软件包有哪一种配置和哪一个默认选项是造成这种行为的原因。2因此，根据你的需要重新配置你的设置是非常困难的。即使你能做到这一点，你也必须在preserve的不缩小和condense的缩小之间做出决定，我认为应该有一个中间地带。

建议的API是什么样子的？

引入一个condense-keep或类似的选项。用它代替condense将总是在元素之间保留一个空格，而不管是否有任何新行。

vue

来源：https://github.com/vuejs/vue/issues/11359

2条答案

按热度按时间

dgjrabp21#

当使用Vue CLI时，可以通过向vue.config.js添加以下配置将默认的condense选项更改为preserve：

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                options.compilerOptions.whitespace = 'preserve';
                return options;
            });
    },
};

赞(0）回复(0）举报 2022-10-28

xghobddn2#

如果只使用<span>元素，whitespace = 'preserve'可以修复这个问题，但是如果我尝试

<p>
  <b>Name:</b>
  <span>Joe</span>
</p>

or

<p>
  <span>Stuff</span>
  <svg>...</svg>
</p>

仍会移除空格（使用vue-template-compiler@2.6.11）
编辑：实际上，我需要删除./node_modules/.cache才能使'preserve'完全生效

赞(0）回复(0）举报 2022-10-28

我来回答

添加选项以在元素之间保留空格，而不考虑新行(vue-template-compiler)

此功能可解决什么问题？

建议的API是什么样子的？

2条答案

相关问题

热门标签

最新问答