升级到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 默认为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;
      });
  }
};

Answer 2

@VamsiKrishna 答案工作正常，但preserveWhitespace自 vue-template-compiler 2.6 起已弃用，您可以改用新选项whitespace：

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

您可以在此处检查其他选项和有效值。

视图 3

在 Vue 3 上，您可以使用应用程序配置，这里是文档：

const app = createApp({});

app.config.compilerOptions.whitespace = 'preserve';