背景

微信小程序支持 跨分包自定义组件引用，但是 uniapp 目前只支持在 pages.json 下的页面中配置 componentPlaceholder， 并不支持在某个具体的组件中添加此配置。

可以通过这个 vite插件 来解决此问题，支持 cli项目 和 hx项目

使用

安装插件

可以通过下面的命令安装依赖

// npm  
npm i @binbinji/vite-plugin-component-placeholder -D  

// yarn  
yarn add @binbinji/vite-plugin-component-placeholder -D  

// pnpm  
pnpm add @binbinji/vite-plugin-component-placeholder -D

配置 vite.config.js

import { defineConfig } from "vite";  
import uni from "@dcloudio/vite-plugin-uni";  
import componentPlaceholderPlugin from "@binbinji/vite-plugin-component-placeholder";  

// https://vitejs.dev/config/  
export default defineConfig({  
  plugins: [uni(), componentPlaceholderPlugin()],  
});

修改目标vue文件

在 vue/nvue/uvue 文件中添加 componentPlaceholder 配置

组合式

<template>  
   // xxxx  
</template>  

<script setup>  
import test from "./test.vue";  

defineOptions({  
  componentPlaceholder: {  
    test: "view"  
  },  
});  
</script>

选项式

<template>  
   // xxxx  
</template>  

<script>  
    import test from "./test.vue"  
    export default {  
        componentPlaceholder: {  
            test: "view"  
        }  
    }  
</script>