网上搜索了很多,但都没有直接说明如何把node_modules中的第三方插件如何引入到分包中,首先为什么要在分包引入,原因就是小程序有包大小的限制,不能超过2M,超过2M的话,则不能发布或预览,于是不能不把一些只有某个或某些页面使用的插件放到分包中。
 

情况说明及解决办法如下:

一,在使用uniapp插件市场时,可以有两种方式可以下载插件,并把插件引入到项目中。一种是直接使用HBuildex导入插件,但这种会自动把插件放入到根目录下uni_modules文件夹中的,在打包时,会自动计入主包大小,如果主包不超过2M,这种方法完全没问题。但如果超过2M,就要考虑放到分包中。

二,放入分包中的步骤:点击下载插件ZIP,点击后,会弹出一个框,如下方。其实也可以把uni_modules文件夹中的插件复制到分包中,一般放在分包中的components文件夹下

引用第三方插件到分包中即如何把uni_modules文件夹中的插件放入分包中

三,引用方式,如果插件在uni_modules文件夹下,直接使用即可,不需要额外的操作。但放入分包后,需要以下代码指定插件位置。

        ①代码使用,正常使用即可,如<qiun type="pie" :opts="opts" :chartData="chartData"/>
        ②引入代码,指定插件位置,如import qiun from "@/pages_repair/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";  

        ③定义插件名称,这也是最重要的一步。在export default中的components中定义。

<template>
	<view>		
				<view style="margin-top: 150rpx;">
					<qiun
					  type="pie"
					  :opts="opts"
					  :chartData="chartData"
					/>
				</view>
	</view>
</template>
<script>
    import qiun from "@/pages_A/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";	
export default {
	components:{
		qiun,
	},
    //其他代码...
}

其实这个操作在如何从插件市场下载使用组件 - DCloud问答  这里面是有说明的,不过这也是我再头疼之后冷静下来才发现的。真的是众里寻他千百度,蓦然回首却在灯火阑珊处。

其实这个操作并不难,只为急需找到答案的朋友提供方便。

发表回复