最近把旧的 vue 项目升级到 vue-cli 4，总体还算顺利，但是遇到一个问题，折腾了半天。
先说下场景：
<button>Edit</button>
<button>Save</button>
<button>Delete</button>
上面的HTML标签，按照HTML的默认行为，会在一行排列过去，而且中间有空格隔开（因为button标签前面有空格）。而项目升级到 vue-cli 4.x 之后，每个按钮挨在一起。
查了各种资料，解决方案都说在 vue.config.js 中加入以下配置：
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
}
}
官方的说法是 vue-cli 4.x 会默认去除代码中的空格，这段代码的作用是修改 vue-loader 的配置，保留代码中的空格。然而，这个设置在我的项目中并没有起作用。
搜了一圈之后，发现 vue-cli 提供了一个新特性：whitespace: 'condense'
<p>
Welcome to <b>Vue.js</b> <i>world</i>.
Have fun!
</p>
像上面的代码，配置 whitespace: 'condense' 后，将会编译成：
<p> Welcome to <b>Vue.js</b> <i>world</i>. Have fun! </p>
官方的说法是 whitespace: 'condense' 将保留同一行中的空格，然而像我一开始的例子，换行之后的空格依旧没有保留。
最后，我把 whitespace: 'condense' 设置为 whitespace = 'preserve' ，便保留了换行后的空格，按钮之间也不会挨在一起了。
附上最后的 vue.config.js ：
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.whitespace = 'preserve'
return options
})
}
}
