收藏
回答

主包中某页面中的子组件如何配置componentPlaceholder去占位分包的组件?

在主包home的组件member-box里去用分包pages-mine的一个组件member-pop,注意:是在主包home的组件里去用,不是注册到页面home 的pages的这个页面,而是在home的子组件member-box去使用

在pages.json中配置了主包home,home页面的子组件member-box怎么配置componentPlaceholder占位符引用分包组件member-pop呢??

会报错没找到占位符

可以看出主包home的组件member-box确实没有配置componentPlaceholder占位符

如果在member- box.json页面手动加上componentPlaceholder,就不报错了

问:如何在子组件如何配置componentPlaceholder去占位分包的组件,uniapp 中子组件不像原生的页面有.json,可以直接配置componentPlaceholder,uniapp写法如何配置子组件的占位符componentPlaceholder呢??

最后一次编辑于  02-11
回答关注问题邀请回答
收藏

5 个回答

  • 筷到碗里来
    筷到碗里来
    04-16

    有2种方案解决

    1.将这些组件配置成页面,被编译了,自然就有占位符了

    2.编译后,写一个脚本,给这些json文件添加占位符配置

    我是使用方案2 ,将需要加配置的组件放到一个目录下面,然后写了一个插件,给这些json文件加配置

    import path from 'path'
    import { readdir, readFile, writeFile, stat } from 'node:fs/promises'
    
    
    export default function FixComponentPlaceholderPlugin(options = {}) {
        const {
            dist = 'dist/build/mp-weixin',
            subDirs = [],
            recursive = true,
            placeholder = {
                'com-chart': 'view'
            }
        } = options
    
    
        // 递归处理 JSON 文件
        async function processDir(dirPath) {
            const entries = await readdir(dirPath, { withFileTypes: true })
    
    
            for (const entry of entries) {
                const fullPath = path.join(dirPath, entry.name)
    
    
                if (entry.isDirectory() && recursive) {
                    await processDir(fullPath)
                }
    
    
                if (entry.isFile() && entry.name.endsWith('.json')) {
                    try {
                        const jsonStr = await readFile(fullPath, 'utf-8')
                        const json = JSON.parse(jsonStr)
    
    
                        json.componentPlaceholder = {
                            ...(json.componentPlaceholder || {}),
                            ...placeholder
                        }
    
    
                        await writeFile(fullPath, JSON.stringify(json, null, 2), 'utf-8')
                        // console.log(`✅ 修改成功: ${fullPath}`)
                    } catch (e) {
                        // console.warn(`❌ 处理失败: ${fullPath}`, e)
                    }
                }
            }
        }
    
    
        return {
            name: 'vite-plugin-fix-component-placeholder',
            async closeBundle() {
                if (!subDirs.length) {
                    console.warn('⚠️ 没有指定 subDirs,跳过处理')
                    return
                }
    
    
                for (const subDir of subDirs) {
                    const fullDir = path.resolve(process.cwd(), dist, subDir)
                    try {
                        const stats = await stat(fullDir)
                        if (stats.isDirectory()) {
                            await processDir(fullDir)
                        } else {
                            console.warn(`⚠️ 跳过:${fullDir} 不是一个目录`)
                        }
                    } catch (err) {
                        console.warn(`⚠️ 目录不存在或无法访问:${fullDir}`)
                    }
                }
            }
        }
    }
    
    
    

    04-16
    有用
    回复
  • 非常哇塞
    非常哇塞
    03-13

    也是使用uniapp遇到了这个问题,pages.json中无法配置孙子组件的componentPlaceholder


    03-13
    有用
    回复
  • 袁子武器🚀
    袁子武器🚀
    02-26

    我也是遇到同样问题,根本不知道在哪处理这个占位

    02-26
    有用
    回复
  • 稳啦上岸张汛杰
    稳啦上岸张汛杰
    02-16

    我有同样的问题,哪位大佬回答下

    02-16
    有用
    回复
  • 智能回答 智能回答 该问答由AI生成
    02-11
    有用
登录 后发表内容