vue run build omit quotes and returns SERVER error 403

[shmdesign]

Version

3.0.0-beta.6

Reproduction link

#1107

Steps to reproduce

vue create app
cd app
npm run build

What is expected?

exemples...

What is actually happening?

exemples

---

I am trying to test the new vue-cli@3. When running -npm run build- and pushing the dist folder in production I realise that almost all links, src and attr are missing double quotes.

Any idea what is going on and how to fix?

All the best

Eliott

[posva]

You need to give more details, those steps do not lead to what you are saying...

You should probably use the forum, the Discord server or StackOverflow for this as it looks like a question. If it turns out to be a bug, please come back with more details 🙂

[aweber1]

I ran into this today where in production mode, the double quotes " around any html element attribute in my index.html template were being removed. While this presented a problem for my specific use case, but I wouldn't classify it as a bug/issue.

The removal of the double quotes stems from the HtmlWebpackPlugin configuration which, when in production mode, enables the minify option for the plugin and sets the removeAttributeQuotes option of the html minifier config to true.

vue-cli/packages/@vue/cli-service/lib/config/app.js

Line 64 in fde3c0e

removeAttributeQuotes: true,

The workaround was relatively straightforward (if you're familiar with webpack-chain). I ended up with something like the following in my vue.config.js:

const vueConfig = {};

if (process.env.NODE_ENV === 'production') {
  vueConfig.chainWebpack = (config) => {
    config.plugin('html').init((Plugin, args) => {
      const newArgs = {
        ...args[0],
      };
      newArgs.minify.removeAttributeQuotes = false;
      return new Plugin(newArgs);
    });
  };
}

module.exports = vueConfig;

Basically, modify the HtmlWebpackPlugin configuration via webpack-chain to set the removeAttributeQuotes option to false when in production.

[chumager]

@aweber1 thanks a lot, my compilation didn't work with safari 'cause of that, I thought it was because of HTTP/2 and finally was the unquoted attributes in HTML.

[jinwyp]

@aweber1 many thanks

[davestewart]

@aweber1 thanks for taking the time to work this out and share

[estellederrien]

Hello I have the same problem , please help
https://stackoverflow.com/questions/58695603/npm-run-build-is-removing-all-quotes

I can't find where to place removeAttributeQuotes: false where is it ?