背景

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

可以通过这个 插件 来解决此问题，支持 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

安装

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