QinJs 官网

Appearance

组件占位符 ​

其他子包组件引用通用子包组件时候的占位符组件。

使用场景 ​

由于页面使用的是子包中的组件，所以需要配置占位组件才能正常显示。那么 qinjs 可以通过在 pages.json 配置 componentPlaceholder 即可。

vue
<!-- pages/index/index.vue -->
<template>
  <div>
    <h1>这个是真正页面使用子包业务组件</h1>
    <Comp1 />
  </div>
</template>

<script setup lang="ts">
import Comp1 from '@@subpackages/pack1/comp1/Index.vue';
</script>
<!-- pages/index/index.vue -->
<template>
  <div>
    <h1>这个是真正页面使用子包业务组件</h1>
    <Comp1 />
  </div>
</template>

<script setup lang="ts">
import Comp1 from '@@subpackages/pack1/comp1/Index.vue';
</script>
vue
<!-- subpackages/base/comp1/Index.vue -->
<template>
  <div>base - comp1</div>
</template>

<script lang="ts" setup>
console.log('这是通用子包中的通用组件');
</script>
<!-- subpackages/base/comp1/Index.vue -->
<template>
  <div>base - comp1</div>
</template>

<script lang="ts" setup>
console.log('这是通用子包中的通用组件');
</script>
vue
<!-- subpackages/pack1/comp1/Index.vue -->
<template>
  <div>
    <div>pack1 - comp1</div>
    <BaseComp1 />
  </div>
</template>

<script lang="ts" setup>
import BaseComp1 from '@@subpackages/base/comp1/Index.vue';
console.log('这是某一个业务子包中的业务组件');
</script>
<!-- subpackages/pack1/comp1/Index.vue -->
<template>
  <div>
    <div>pack1 - comp1</div>
    <BaseComp1 />
  </div>
</template>

<script lang="ts" setup>
import BaseComp1 from '@@subpackages/base/comp1/Index.vue';
console.log('这是某一个业务子包中的业务组件');
</script>

问题 ​

那么 subpackages/base/comp1/Index.vue 中提示需要配置占位组件怎么办呢？

shell
编译错误 主包不能直接引用分包文件，请配置占位组件 subpackages/base/comp1/Index.vue at subpackages/pack1/comp1/Index.vue
编译错误 主包不能直接引用分包文件，请配置占位组件 subpackages/base/comp1/Index.vue at subpackages/pack1/comp1/Index.vue

解决方案 ​

只需在 subpackages/base/comp1 目录下新建 index.json 配置对应的占位组件即可。

json
// subpackages/base/comp1/index.json
{
  "componentPlaceholder": {
    "base-comp1": "view"
  }
}
// subpackages/base/comp1/index.json
{
  "componentPlaceholder": {
    "base-comp1": "view"
  }
}