Vue-loader 開啓壓縮後的一些坑

在使用vue-loader 配合webpack 對.vue文件進行加載的時候，若是開啓了代碼壓縮會出來下面
幾種問題，作個記錄。

• 丟失td結束標記，致使頁面的佈局錯亂
• input的屬性type爲text 時會被刪了
• <input ... checked="{check('id')}" />這個表達式會被壓成 <input ... checked />

丟失td結束標記

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

最終壓成:

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

這樣就會形成頁面的佈局混亂

解決方法:

//webpack.config.js配置 //設置vue-html-loader中的參數removeOptionalTags=false module:{ .... }, vue: { loaders: { html: 'vue-html-loader?removeOptionalTags=false', } } //hell

 

type=」text」會被刪了

壓縮前 <input type="text" /> 壓縮後 <input />

若是有 .text這樣的選擇器，就會失效

解決方法:

//和上面相似加上removeRedundantAttributes=false module:{ .... }, vue: { loaders: { html: 'vue-html-loader?removeRedundantAttributes=false', } }

 

checked=」xxxx」被壓縮爲checked

壓縮前 <input type="checkbox" checked="{checkRole('id')}" /> 壓縮後 <input type="checkbox" checked/>

 

這會致使所綁定的判斷方法直接被刪除了,全部的checkbox都被選中

解決方法能夠有兩個:
1.跟上面同樣:設置參數讓vue-html-loader不要去截斷這個

html: 'vue-html-loader?collapseBooleanAttributes=false'

 

可是這個會帶來另外的問題：若是你自自定義控件中也用了checked/multiple 這種默認的屬性，
它會自動給他補全了。如：

壓縮前 <slef-component multiple /> 你在slefComponent裏面定義的prop.multiple 是一個bool類型 壓縮後 <slef-component multiple="multiple"/> 這裏直接致使了程序的出錯

 

2.第二種方法能夠避免這種狀況
不修改vue-html-loader的collapseBooleanAttributes

該用v-bind來綁定控件(自定義控件，原生控件)的屬性 <input type="checkbox" v-bind:checked="checkRole('id')" /> <slef-component multiple />