Vue自定义组件在H5端正常 ，在小程序中提示Component is not found in path

Question

Q: Vue自定义组件在H5端正常 ，在小程序中提示Component is not found in path"xxx组件的路径"

情景 : 使用自定义组件写了一个浮动按钮,点击浮动按钮跳转到另一个页面

自定义组件代码

<template>
    <view class="floatButton" :style="{ '--right': `${rightPx}px`, '--bottom': `${bottomPx}px` }">
        <!-- 浮动按钮 -->
        <view class="nav-item nav-item__switch"  @click="clickFloatButton()">
            <text class='t-icon t-icon-gengduo iconspan'></text>
        </view>
    </view>
</template>

<script>
    import {
        getTabBarLinks
    } from '@/utils/app.js'
    export default {
        /**
         * 组件的属性列表
         * 用于组件自定义设置
         */
        props: {
            right: {
                type: Number,
                default: 30
            },
            bottom: {
                type: Number,
                default: 100
            }
        },
        data() {
            return {
                // 弹窗显示控制
                isShow: false,
                transparent: true
            }
        },
        

        computed: {
            rightPx() {
                return uni.upx2px(this.right)
            },
            bottomPx() {
                return uni.upx2px(this.bottom)
            }
        },

        methods: {
            /**
             * 点击浮动按钮事件
             */
            clickFloatButton() {
                console.log("1")
                this.$emit('onClick');
            }
        }
    }
</script>

<style lang="scss" scoped>
    // @import url("@/pages_device/iconfont/iconfont.css");
    
    // @import url("@/pages_device/iconfont/iconfont.css");
    @import url("@/static/iconfont/iconfont.css");
    @import url("@/pages_device/iconfont/iconfont-weapp-icon.css");
    /* 快捷导航 */
    .floatButton {
        position: fixed;
        right: calc(var(--window-right) + var(--right));
        bottom: calc(var(--window-bottom) + var(--bottom));
        width: 76rpx;
        height: 76rpx;
        line-height: 1;
        z-index: 5;
        border-radius: 50%;
    }

    /* 导航菜单元素 */
    .nav-item {
        position: absolute;
        bottom: 0;
        padding: 0;
        width: 76rpx;
        height: 76rpx;
        line-height: 76rpx;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        text-align: center;
        transform: rotate(0deg);
        opacity: 0;
    }

    .nav-item .iconfont {
        font-size: 46rpx;
        color: transparent;
        background-repeat: no-repeat;
    }

    /* 导航开关 */

    .nav-item__switch {
        opacity: 1;
    }


    .iconspan{  /*图标span 调整图标位置*/
        display: inline-block;
        margin-top: -5rpx; /* 3 */
        transform: scale(2); /* 调节 icon 大小*/
        vertical-align: middle;
    }
</style>

在使用组件的vue 文件 : index.vue 位置引入,使用了相对路径

<script>
    import FloatButton from '@/pages_device/components/shortcut/floatButton.vue'
</script>

在 index.vue 中使用

<floatButton @onClick="clickFloatButton()" />

在 hbuilderX当中用内置浏览器运行查看

使用微信小程序开发工具运行

报错

在微信小程序开发者工具中真机调试 -- Android 端真机调试 === 不显示

在微信小程序开发者工具中真机调试 -- PC 端真机调试 === 显示了

Answer 1

问题猜测,可能是由于组件所在位置

    // 尝试放到主分包下,可以正常显示
    // import FloatButton from '@/components/my/floatButton.vue'
    // 放在 device 下会不显示浮动按钮报错 : Component is not found in path "pages_device/components/shortcut/floatButton" (using by "pages/sys/device/index")
    import FloatButton from '@/pages_device/components/shortcut/floatButton.vue'

但是主分包下由于一些原因不能放东西就很尴尬
但是问题找到啦~

总结 :

错误原因 : 公共组件要在主包，如果再分包，那这个组件只能在分包上使用，其他分包无法使用