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

網上搜索了很多,但都沒有直接說明如何把node_modules中的第三方插件如何引入到分包中,首先爲什麼要在分包引入,原因就是小程序有包大小的限制,不能超過2M,超過2M的話,則不能發佈或預覽,於是不能不把一些只有某個或某些頁面使用的插件放到分包中。
 

情況說明及解決辦法如下:

一,在使用uniapp插件市場時,可以有兩種方式可以下載插件,並把插件引入到項目中。一種是直接使用HBuildex導入插件,但這種會自動把插件放入到根目錄下uni_modules文件夾中的,在打包時,會自動計入主包大小,如果主包不超過2M,這種方法完全沒問題。但如果超過2M,就要考慮放到分包中。

二,放入分包中的步驟:點擊下載插件ZIP,點擊後,會彈出一個框,如下方。其實也可以把uni_modules文件夾中的插件複製到分包中,一般放在分包中的components文件夾下

三,引用方式,如果插件在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問答  這裏面是有說明的,不過這也是我再頭疼之後冷靜下來才發現的。真的是衆裏尋他千百度,驀然回首卻在燈火闌珊處。

其實這個操作並不難,只爲急需找到答案的朋友提供方便。
————————————————
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章