Spaces are gone in HTML after upgrading to vue-cli 3

Question

I was using vue cli 2 without any custom configuration. Now I upgraded to cli3 and i noticed in the processed HTML it removes ALL whitespace. e.g. if my original html is this:

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

the old (cli 2 + webpack) would convert it into this:

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

whereas the new one does this:

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

note the space is gone before <span class... which causes this:

to become this:

My vue.config.js is pretty basic:

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

I know I can just add   or make other changes to html itself, but the app is quite large and looking for all these places will take days.

Does anybody know the options I need to ensure it optimizes html the same way it did with the old cli+webpack combo?

Answer 1

The @VamsiKrishna answer works fine, but preserveWhitespace is deprecated since vue-template-compiler 2.6, you may use new option whitespace instead:

// 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;
      });
  }
};

You may check other options and valid values here.

Vue 3

On Vue 3, You may use application config, here is the docs:

const app = createApp({});

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