0

After running the npm build, the ./dist/index.html file is generated without the quotes. The project does not have a webpack.config.js or a vue.config.js. The build is generated from the example project made with vue create. How do I solve this?

<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>html-project</title><link href=/app.css rel=preload as=style><link href=/app.js rel=preload as=script><link href=/chunk-vendors.js rel=preload as=script><link href=/app.css rel=stylesheet></head><body><noscript><strong>We're sorry but html-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/chunk-vendors.js></script><script src=/app.js></script></body></html>
tony19
  • 125,647
  • 18
  • 229
  • 307
Gerald Bern
  • 61
  • 9

1 Answers1

1

Attribute quotes aren't necessary there (that's still valid HTML), so they're removed in production builds to reduce the output size of the HTML file.

If you prefer to keep the quotes, you could configure the HTML minifier options (i.e., specifically removeAttributeQuotes) as follows:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap((args) => {
      args[0].minify = {
        ...args[0].minify,
        removeAttributeQuotes: false
      }
      return args
    })
  }
}
tony19
  • 125,647
  • 18
  • 229
  • 307
  • It is a valid html that does not work. If the html is opened in the browser, the blank page is returned. But thanks for the answer, although I had already solved it using removeAttributeQuotes in the same way. – Gerald Bern Aug 31 '20 at 10:17
  • Interesting. Do you have an example where this fails? – tony19 Aug 31 '20 at 16:34