uniapp微信小程序打包使用unplugin-vue-components自动引入的自定义组件编译无效

uniapp微信小程序打包使用unplugin-vue-components自动引入的自定义组件编译无效

记录一下最近在用uniapp写微信小程序时，想使用unplugin-vue-components自动引入组件的功能；在按照教程配置之后，始终无法将自动引入的组件编译出来；
最开始还以为是自己搞错了，找了大半天，后面尝试用H5编译试试，就展示出来了，真是坑啊。

基本配置

//vite.config.ts
export default defineConfig({
  plugins: [
    uni(),
    Components({
      dirs: ["src/test"], // 指定组件目录
    })
  ],
});

页面引用

<template>
  <view class="content">
    // 此处引用
    <TEST />

    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
  </view>
</template>

结果展示

• 微信小程序
  
• H5
  

结论

uniapp中使用unplugin-vue-components引入自定义组件，微信小程序解析编译相关的组件为元素