webpack - 升级到 vue-cli 3 后，HTML 中的空格消失了

Question

我使用的是 vue cli 2，没有任何自定义配置。现在我升级到 cli3，我注意到在处理过的 HTML 中它删除了所有空格。 例如如果我原来的 html 是这样的:

<div class="link">
    <i class="fa fa-lg" :class="item.icon"/>
    <span class="hidden-sm hidden-xs">{{item.name}}</span>
</div>

旧的(cli 2 + webpack)会把它转换成这样:

<div class="link"><i class="fa fa-lg fa-calendar"/> <span class="hidden-sm hidden-xs">CALENDAR</span></div>

而新的是这样做的:

<div class="link"><i class="fa fa-lg fa-calendar"/><span class="hidden-sm hidden-xs">CALENDAR</span></div>

请注意 <span class... 之前的空格已消失这导致了这个:

变成这样:

我的 vue.config.js 非常基础:

// vue.config.js
module.exports = {
  runtimeCompiler: true
}

我知道我可以添加  或对 html 本身进行其他更改，但该应用程序非常大，查找所有这些位置需要几天时间。

有人知道我需要哪些选项来确保它像使用旧的 cli+webpack 组合一样优化 html 吗？

Answer 1

正如@raina77ow 指出问题的链接，preserveWhitespace 在 vue-loader 选项中默认为 false。

您可以配置 vue-loader的模板编译器选项 preserveWhitespace 为 true 使用 vue.config.js文件

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap(options => {
        // modify the options...
        options.compilerOptions.preserveWhitespace = true;
        return options;
      });
  }
};