背景

微信小程序支持分包异步化 跨分包自定义组件引用，但是 uniapp 目前只支持在 pages.json 下的页面中配置 componentPlaceholder， 并不支持在某个具体的组件中添加此配置。可以通过uni-toolkit的插件来解决此问题。

特性

• 配置简单，开箱即用
• 支持 vue、nvue、uvue 三种文件
• 支持 uni-app 和 uni-app-x 项目
• 支持 组合式 和 选项式 两种写法
• 支持 cli 项目和 hx 项目

Vue3

安装

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'

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

修改 Vue 文件

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

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

// #ifdef MP
<component-config>
// 此处必须是标准的 json 对象，支持条件编译
{
  "componentPlaceholder": {  
    "test": "view"
  }  
}
</component-config>
// #endif

Vue2

• 0.0.15 以上的版本对于 node 最低版本要求是 16+

安装

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'

exportdefault {
components: {
    test
  }
}
</script>

// #ifdef MP
<component-config>
// 此处必须是标准的 json 对象，支持条件编译
{
  "componentPlaceholder": {  
    "test": "view"
  }  
}
</component-config>
// #endif

Tips

如果你是 vue3 项目，并且单纯只想添加 componentPlaceholder 配置，可以使用 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/
exportdefault defineConfig({
plugins: [uni(), componentPlaceholderPlugin()],
})

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

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

组合式文件

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

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

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

选项式文件

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

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

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