VueJS - prod build removes attribute quotes from HTML

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

This is blind shot from me. What if you try using something similar to here?: https://forum.vuejs.org/t/enable-minify-removeattributequotes/47431/4 — Gynteniuxas, Sep 20 '20 at 13:01

score 1 · Answer 1 · answered Dec 28 '20 at 16:03

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

VueJS - prod build removes attribute quotes from HTML

1 Answers1