正文

Vue-loader 开启压缩后的一些坑

IP云
IP云V管理员/0 阅读
11/28
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

在使用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 />

相关阅读

目录[+]