最近把旧的 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
          })
    }
}