Vue-cli: vue run build omit quotes and returns SERVER error 403

Created on 10 Apr 2018 · 6Comments · Source: vuejs/vue-cli

Version

3.0.0-beta.6

Reproduction link

https://github.com/vuejs/vue-cli/issues/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

Source

shmdesign

Most helpful comment

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.

https://github.com/vuejs/vue-cli/blob/fde3c0ed2c8395d70c3c19b8bbeb910c900a9eae/packages/%40vue/cli-service/lib/config/app.js#L64

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.

aweber1 on 17 Jul 2018

👍13 🎉3 🚀1

All 6 comments

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 🙂

posva on 10 Apr 2018

https://github.com/vuejs/vue-cli/blob/fde3c0ed2c8395d70c3c19b8bbeb910c900a9eae/packages/%40vue/cli-service/lib/config/app.js#L64

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.

aweber1 on 17 Jul 2018

👍13 🎉3 🚀1

@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.