CODEWITHSUNDEEP
vue.jswebpack
Kirk Ross
Kirk Ross

Reputation: 7153

VueJS - prod build removes attribute quotes from HTML

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

Upvotes: 0

Views: 639

Answers (1)

José Silva
José Silva

Reputation: 401

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

Upvotes: 1

Related Questions