Vue-loader 开启压缩后的一些坑
2016-08-13 18:33
253 查看
在使用vue-loader 配合webpack 对.vue文件进行加载的时候,如果开启了代码压缩会出来下面
几种问题,做个记录。
丢失td结束标记,导致页面的布局错乱
input的属性type为text 时会被删了
最终压成:
这样就会造成页面的布局混乱
解决方法:
如果有
解决方法:
这会导致所绑定的判断方法直接被删除了,所有的checkbox都被选中
解决方法可以有两个:
1.跟上面一样:设置参数让vue-html-loader不要去截断这个
但是这个会带来另外的问题:如果你自自定义控件中也用了checked/multiple 这种默认的属性,
它会自动给他补全了。如:
2.第二种方法可以避免这种情况
不修改vue-html-loader的collapseBooleanAttributes
几种问题,做个记录。
丢失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/> |
解决方法可以有两个:
1.跟上面一样:设置参数让vue-html-loader不要去截断这个
html: 'vue-html-loader?collapseBooleanAttributes=false' |
它会自动给他补全了。如:
压缩前 <slef-component multiple /> 你在slefComponent里面定义的prop.multiple 是一个bool类型 压缩后 <slef-component multiple="multiple"/> 这里直接导致了程序的出错 |
不修改vue-html-loader的collapseBooleanAttributes
该用v-bind来绑定控件(自定义控件,原生控件)的属性 <input type="checkbox" v-bind:checked="checkRole('id')" /> <slef-component multiple /> |
相关文章推荐
- vue 进行 gzip压缩和服务器如何开启gzip
- 有关压缩的一些东西
- ASP.NET大型OA中常用的一些报表生成,压缩,下载等操作代码
- JavaClassLoader的一些热运用
- windows下apache开启gzip压缩 加快网页下载速度
- IIS开启GZIP压缩效率对比及部署方法 (转)
- linux 目录结构+常用命令+压缩命令+vim使用+及一些基础知识(非常好)
- 用批处理开启或关闭VMware的一些相关服务
- MFC下结束AfxBeginThread开启的线程的一些体会
- windows下apache开启gzip压缩 加快网页下载速度
- ClassLoader与Ant的一些问题
- 关于网页缓存及gzip压缩的一些东西
- YUI Compressor 组件压缩 JavaScript 的一些原理
- PHP开启gzip页面压缩实例代码
- 关于网页缓存及gzip压缩的一些东西
- vim 的一些使用方法,如设置行号,开启自动缩进等
- Linker和loader的一些网站
- 如何在PHP开启gzip页面压缩实例
- IIS开启GZIP压缩效率对比及部署方法