背景

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

可以通过这个 插件 https://github.com/uni-toolkit/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'  

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

修改 Vue 文件

<template>  
  <view class="container">  
    <text>Hello World</text>  
  </view>  
</template>  

<script>  
export default {  
  name: 'MyComponent'  
}  
</script>  

// #ifdef MP  
<component-config>  
// 此处必须是标准的 json 对象，支持条件编译  
{  
  "usingComponents": {  
    "custom-button": "/components/custom-button"  
  },  
  "styleIsolation": "apply-shared",  
  "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 class="container">  
    <text>Hello World</text>  
  </view>  
</template>  

<script>  
export default {  
  name: 'MyComponent'  
}  
</script>  

// #ifdef MP  
<component-config>  
// 此处必须是标准的 json 对象，支持条件编译  
{  
  "usingComponents": {  
    "custom-button": "/components/custom-button"  
  },  
  "styleIsolation": "apply-shared",  
  "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({  
  // #ifdef MP  
  componentPlaceholder: {  
    test: 'view',  
  }  
  // #endif  
})  
</script>

选项式文件

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

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

export default {  
  components: {  
    test,  
  },  
  // #ifdef MP  
  componentPlaceholder: {  
    test: 'view',  
  }  
  // #endif  
}  
</script>