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 端真机调试 === 显示了

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

报错

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

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

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

	// 尝试放到主分包下,可以正常显示
	// 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'

但是主分包下不能放东西就很尴尬(因为微信小程序分包主包大小受限制)

总结 :

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

主包不能调用分包的组件的，只有分包能调用主包的组件

代理商01 : http://localhost:8083/#/pages_device/device/index
admin : http://localhost:8083/#/pages/sys/device/index
	这里的 index 是在主分包下的,所以不能调用 pages_device 里面的组件