MpVue打包vendor过大问题解决办法

webpack开发环境没进行UglifyJs压缩,所以解决的方法来了,引入UglifyJs插件

修改build目录下 的webpackdevconfjs配置文件，前面添加插件的引入，

在插件列表最后加上一句话，即可完美解决

原文链接： >

先将 iview weapp 的 dist文件夹复制到项目的 static/iview 下（ 这个步骤就不赘述了，不懂的可以留言 ）。

在项目 ( app部分 ) 的 appvue 中加入：

在页面 ( page部分 ) 的文件夹下新建 mainjson 文件，写入：

在页面文件夹的 indexvue 文件里写入：

解决方法：给绑定change事件的元素或组件另外添加@clickstop指向一个空函数，用来阻止冒泡

注：此方法主要用于mpvue，@clickstop是vue中阻止点击事件冒泡的方法。如果是原生小程序应该为绑定change事件的元素或组件添加catchtap绑定一个空函数

这是在用mpvue开发小程序时遇到一个问题，项目需要引用小程序的picker选择器组件，发现在点击picker选择器触发其change事件时会触发picker选择器外层父元素的点击事件（项目需要实现对一个模块进行点击跳转，同时要求模块内的一个子元素有选择器功能）

开始通过查看vue文档和小程序文档，找到两种方法，分别是vue的stop阻止冒泡和小程序的catch前缀，但通过测试发现给change事件直接添加stop或者catch没有用

最后选用了网上搜到的一个折中的方法，给picker选择器另外添加一个点击事件（或者给选择器的父元素添加点击事件），为新加的点击事件添加阻止冒泡方法，使点击事件指向一个空函数。这样也就间接的解决了change事件冒泡的问题

如果大家还有更好的方法，欢迎留言

最近用了一下Vant

Weapp组件库，但是由于我是用mpvue写的，所以自然跟小程序引用不一样，比如我最近引用了vant里面的collapse折叠面板，官网文档里面介绍的使用方法是这样的

1在

appjson

或

indexjson

中引入组件

"usingComponents":

{

"van-collapse":

"path/to/vant-weapp/dist/collapse/index",

"van-collapse-item":

"path/to/vant-weapp/dist/collapse-item/index"

}

2通过value控制展开的面板列表，activeNames为数组格式

<van-collapse

value="{{

activeNames

}}">

<van-collapse-item

title="有赞微商城"

name="1">

提供多样店铺模板，快速搭建网上商城

</van-collapse-item>

<van-collapse-item

title="有赞零售"

name="2">

网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失

</van-collapse-item>

<van-collapse-item

title="有赞美业"

name="3"

disabled>

线上拓客，随时预约，贴心顺手的开单收银

</van-collapse-item>

</van-collapse>

Page({

data:

{

activeNames:

['1']

},

onChange(event)

{

thissetData({

activeNames:

eventdetail

});

}

});

但是在mpvue里面不能直接这样引入

下面是我的代码

<van-collapse

:value="activeNames"

@change="onChange($event)">

<van-collapse-item

title="有赞微商城"

name="1">

提供多样店铺模板，快速搭建网上商城

</van-collapse-item>

<van-collapse-item

title="有赞零售"

name="2">

网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失

</van-collapse-item>

<van-collapse-item

title="有赞美业"

name="3"

disabled>

线上拓客，随时预约，贴心顺手的开单收银

</van-collapse-item>

</van-collapse>

export

default

{

data

()

{

return

{

activeName:

'1'

}

},

methods:

{

onChange

(event)

{

consolelog(event)

thisactiveName

=

eventmpdetail

}

}

}

得把原生小程序使用方式为改为mpvue

使用方式

首先是数据绑定方式

value="{{activeNames}}"

改为

v-bind:value="activeNames"

//或者

:value="activeNames"

然后是事件监听

在van-collapse组件里加个监听事件

@change="onChange($event)"

mpvue中获取event值也与原生小程序有所不同：

onChange(event){

//

获取表单组件filed的值

consolelog(eventmpdetail)

//

注意加入mp

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:详解如何搭建mpvue框架搭配vant组件库的小程序项目mpvue+vant

app搭建微信小程序的方法步骤

以上就是关于MpVue打包vendor过大问题解决办法全部的内容，包括:MpVue打包vendor过大问题解决办法、微信小程序(Mini Program)技术栈与框架简介、mpvue 小程序如何使用 iview weapp 中的 tabbar等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！