在Vue模板中，元素标签之间的空格和新行不会被忽略

Question

<template>
<div>
<p>
hello world
</p>
</div>
</template>

输出:<p> hello world </p>

"hello world"前后的空格不是想要的。如何通过webpack或lint删除空格?

vue.config.js

chainWebpack: (config) => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions.whitespace = "condense"
merge(options, {
optimizeSSR: false
})
}); 
...

Answer 1

问题可能是您在Vue配置中使用了whitespace: condense设置。

根据文档(https://cnpmjs.org/package/vue-template-compiler):

)

如果设置为'condense':
非纯空白文本节点中的连续空白将被压缩成一个空格。

由于这不是一个新的Vue应用程序的"默认设置"，我建议删除它，看看是否能解决问题。