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

ierdna 发表于 Dev

地球

我使用的是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的选项吗？

瓦姆西·克里希纳（Vamsi Krishna）

正如@ raina77ow指向问题的链接一样，preserveWhitespace默认为falsevue-loader选项中的。

您可以配置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;
      });
  }
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。