Vue-loader opening a few pits after compression

When loading the. vue file with Vue-loader mate Webpack, if code compression is turned on, the following
Several questions, make a record.

• Missing TD end tag, resulting in page layout confusion
• Input is deleted when the property type is text
• <input ... checked="{check(‘id‘)}" />This expression will be pressed into<input ... checked />

Missing TD end Tag

<table>, <TR> <td>1 </TD> < td>2</TD> <td>3</TD> <td>4</ Td>, </TR> </TABLE>

Finally press into:

<table> <tr> <td>1 <td>2 <td>3 <td>4 </tr> </table>

This will cause the layout of the page to be confusing

Workaround:

Webpack.config.js Configuration Set the parameters in Vue-html-loader removeoptionaltags=false module:{ .... }, Vue: { Loaders: { ' Vue-html-loader?removeoptionaltags=false ', } } Hell

Type= "text" will be deleted.

Before compression <type="text"/> After compression <input/>

If there is .textA selector like this will fail.

Workaround:

And like above plus removeredundantattributes=false module:{ .... }, Vue: { Loaders: { ' Vue-html-loader?removeredundantattributes=false ', } }

Checked= "XXXX" is compressed to checked

Before compression <type=checked="{checkrole (' id ')}"/> After compression <type=checked/>

This causes the bound judgment method to be deleted, and all checkboxes are selected

There are two possible workarounds:
1. Same as above: set the parameters so vue-html-loader don't cut this off.

' Vue-html-loader?collapsebooleanattributes=false '

But this brings up another problem: If you use the default property of Checked/multiple in your custom control,
It will give him a full complement automatically. Such as:

Before compression <multiple/> The prop.multiple you define in Slefcomponent is a bool type. After compression <multiple="multiple"/> This leads directly to a program error.

2. The second method can avoid this situation
Do not modify the collapsebooleanattributes of Vue-html-loader

Use V-bind to bind the properties of the control (custom control, native control) <type=v-bind:checked="checkrole (' id ')"/> <multiple/>

Vue-loader opening a few pits after compression