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