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 />