VueJS - prod build removes attribute quotes from HTML - vue.js

Question

First, is it standard to remove attribute quotes from HTML in a minified production build? It seems like that would cause problems in some browsers / platforms? If so, then everything below doesn't really matter, but I'm still curious.
I have the below in my vue.config.js and it works to keep attribute quotes in the prod build, but breaks yarn serve.
Local Vue version 2.6.12. #vue/cli version 4.5.4.
chainWebpack: (config) => { // chainWebpack grayed out
config.plugin("html").tap((args) => {
args[0].minify.removeAttributeQuotes = false;
return args;
});
},
It doesn't seem to find minify - I keep getting: ERROR TypeError: Cannot set property 'removeAttributeQuotes' of undefined

Answer 1

First, is it standard to remove attribute quotes from HTML in a minified production build?
It's not standard but still valid HTML. The attribute quotes are removed in production builds to reduce the output size of the HTML size so if you're en DEV environment (like when you're running yarn serve) the object args[0].minify is undefined.
So for keeping the quotes in production build and not get errors in other environments, you can set the attribute removeAttributeQuotes as follows (instead of modifying its value, like in your code):
chainWebpack: (config) => {
config.plugin('html').tap((args) => {
args[0].minify = {
...args[0].minify,
removeAttributeQuotes: false,
}
return args
})
},
See related issue