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

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';

The other answers work on Vue 2 but not since Vue 3.

It is now possible in vue-cli since Vue version 3.1.0.

But with a different setup: it's only possible to use the compilerOptions when you use the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly. e.g. vue.global.js https://v3.vuejs.org/guide/installation.html#from-cdn-or-without-a-bundler

https://v3.vuejs.org/api/application-config.html#compileroptions

enter image description here

You can add this globally where you define your app (usually main.js): app.config.compilerOptions.whitespace = 'preserve'

or in a component (https://v3.vuejs.org/api/options-misc.html#compileroptions):

export default {
  compilerOptions: {
    whitespace: 'preserve'
  }
}

And in Vite (later than Vue version 3.0.6):

in vite.config.js

  plugins: [
    createVuePlugin({
      vueTemplateOptions: {
        compilerOptions: {
          whitespace: 'preserve'
        }
      }
    })
  ], // https://vitejs.dev/config/

As @raina77ow pointed to the links to the issue, preserveWhitespace defaults to false in vue-loader options.

You can configure the vue-loader's template compiler option preserveWhitespace to true using the vue.config.js file

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