背景

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

可以通过这个 插件 https://github.com/uni-toolkit/uni-toolkit 来解决此问题

特性

• 配置简单，开箱即用
• 支持 vue、nvue、uvue 三种文件
• 支持 uni-app 和 uni-app-x 项目
• 支持 组合式 和 选项式 两种写法
• 支持 cli 项目和 hx 项目
• 支持通过 mp-* 顶层配置为不同小程序平台生成专属配置

0.4.0 变更

从 0.4.0 起，<component-config> 使用原生 JSON.parse 解析，标签内必须是严格 JSON，不支持注释、尾逗号、单引号以及条件编译指令。

整个 <component-config> 仍可以在外层使用 #ifdef MP 包裹。需要区分具体小程序平台时，请在 JSON 顶层使用 mp-* 配置：

// #ifdef MP  
<component-config>  
{  
  "x": 1,  
  "mp-weixin": { "y": 2 },  
  "mp-alipay": { "z": 3 }  
}  
</component-config>  
// #endif

• 编译到 mp-weixin 时得到 { "x": 1, "y": 2 }
• 编译到 mp-alipay 时得到 { "x": 1, "z": 3 }
• 编译到其他小程序平台时只得到 { "x": 1 }
• mp-weixin、mp-alipay 等平台键本身不会写入最终产物

外层的 #ifdef MP 用于隔离非小程序构建；具体小程序平台之间的差异应使用 mp-* 配置，不要在 JSON 内部使用条件编译。

Vue3

Node.js >= 20.19.0

安装

npm install @uni_toolkit/vite-plugin-component-config -D  
# 或  
pnpm add @uni_toolkit/vite-plugin-component-config -D  
# 或  
yarn add @uni_toolkit/vite-plugin-component-config -D

使用方法

配置 vite.config.js

// vite.config.js  
import { defineConfig } from 'vite'  
import uni from '@dcloudio/vite-plugin-uni'  
import componentConfig from '@uni_toolkit/vite-plugin-component-config'  

export default defineConfig({  
  plugins: [  
    componentConfig(), // 在 uni 插件之前调用  
    uni(),  
  ]  
})

修改 Vue 文件

<template>  
  <view>test page</view>  
  <test></test>  
</template>  

<script setup>  
import test from './test.vue'  
</script>  

// #ifdef MP  
<component-config>  
{  
  "componentPlaceholder": {  
    "test": "view"  
  }  
}  
</component-config>  
// #endif

Vue2

Node.js >= 20.19.0

安装

npm install @uni_toolkit/webpack-plugin-component-config -D  
# 或  
pnpm add @uni_toolkit/webpack-plugin-component-config -D  
# 或  
yarn add @uni_toolkit/webpack-plugin-component-config -D

使用方法

配置 vue.config.js

const WebpackComponentConfigPlugin = require('@uni_toolkit/webpack-plugin-component-config').default;  

module.exports = {  
  configureWebpack: {  
    plugins: [  
      new WebpackComponentConfigPlugin()  
    ]  
  }  
};

修改 Vue 文件

<template>  
  <view>test page</view>  
  <test></test>  
</template>  

<script>  
import test from './test.vue'  

export default {  
  components: {  
    test  
  }  
}  
</script>  

// #ifdef MP  
<component-config>  
{  
  "componentPlaceholder": {  
    "test": "view"  
  }  
}  
</component-config>  
// #endif

Tips

如果你是 vue3 项目，并且单纯只想添加 componentPlaceholder 配置，可以使用 https://github.com/chouchouji/vite-plugin-component-placeholder

安装

// 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

使用

1. 引入插件 @binbinji/vite-plugin-component-placeholder

// vite.config.*  
import componentPlaceholderPlugin from '@binbinji/vite-plugin-component-placeholder'  
import uni from '@dcloudio/vite-plugin-uni'  
import { defineConfig } from 'vite'  

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

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

在 vue 相关文件中添加 componentPlaceholder 配置

组合式文件

<template>  
  <view>test page</view>  
  <test></test>  
</template>  

<script setup>  
import test from './test.vue'  

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

选项式文件

<template>  
  <view>test page</view>  
  <test></test>  
</template>  

<script>  
import test from './test.vue'  

export default {  
  components: {  
    test,  
  },  
  componentPlaceholder: {  
    test: 'view',  
  }  
}  
</script>