使用@uni-helper/vite-plugin-uni-pages生成小程序主包使用不了分包组件问题

uniapp项目(vue3+ts+vite+unocss)
前提: 开发新项目为了主包不超包;我把一个分包(shared)easycom了,

然后主包我想用都写在这个分包中组件,其他分包共用的组件也写在这个分包中相当'共享分包'.
根据已有知识配置当前页面,

1. definePage({
2.   style: {
3.     navigationBarTitleText: '',
4.   },
5.   // ✅ 在这里配置微信小程序特有的选项
6.   componentPlaceholder: {
7.     'shared-my-info': 'view',
8.     'shared-my-details': 'view',
9.     'shared-my-calendar': 'view',
10.     'shared-my-activities': 'view',
11.   },
12. })

复制代码

微信小程序生成了page.json我的引用的页面componentPlaceholder,到这没问题;
问题: 对应页面的json文件没有生成对应代码

1. componentPlaceholder: {
2.     'shared-my-info': 'view',
3.     'shared-my-details': 'view',
4.     'shared-my-calendar': 'view',
5.     'shared-my-activities': 'view',
6.   },

复制代码

期望生成但是没有,最后我写了vite方法处理生成的json文件如果有引用shared的组件让其生成上面的配置.
vite文件如下,如果需要的话可以拿走,注意我自动生成的pages.json.js如果你是pages.json记得改

1. import type { Plugin } from 'vite'
2. import path from 'node:path'
3. import process from 'node:process'
4. import fs from 'fs-extra'
6. /**
7. * 页面配置同步插件配置接口
8. *
9. * 用于解决微信小程序 componentPlaceholder 需要同时配置在 pages.json 和页面 .json 文件的问题
10. * 自动将 pages.json 中的 componentPlaceholder 配置同步到对应的页面 .json 文件中
11. */
12. export interface SyncPageConfigOptions {
13.   /** 是否启用插件 */
14.   enable?: boolean
15.   /**
16.    * 是否显示详细日志，便于调试和监控同步过程
17.    */
18.   verbose?: boolean
19.   /** 自定义日志前缀，用于区分不同插件的日志输出 */
20.   logPrefix?: string
21.   /**
22.    * 目标平台，默认为 'mp-weixin'
23.    * 可以扩展到其他小程序平台如 'mp-alipay', 'mp-baidu' 等
24.    */
25.   targetPlatform?: string
26. }
28. /**
29. * 默认配置
30. */
31. const DEFAULT_OPTIONS: Required<SyncPageConfigOptions> = {
32.   enable: true,
33.   verbose: true,
34.   logPrefix: '[sync-page-config]',
35.   targetPlatform: 'mp-weixin',
36. }
38. /**
39. * 页面配置同步插件
40. *
41. * 功能说明：
42. * 1. 解决微信小程序 componentPlaceholder 配置问题
43. * 2. 自动将 pages.json 中的 componentPlaceholder 配置同步到对应页面的 .json 文件
44. * 3. 支持主包页面和分包页面
45. * 4. 智能合并现有配置，避免覆盖其他配置
46. *
47. * 使用场景：
48. * - 使用 @uni-helper/vite-plugin-uni-pages 插件
49. * - 在页面中使用 definePage({ componentPlaceholder: {...} })
50. * - 需要微信小程序平台支持自定义组件的占位配置
51. *
52. * 工作原理：
53. * 1. 在构建完成后读取 dist/[mode]/[platform]/pages.json
54. * 2. 遍历所有页面配置，查找包含 componentPlaceholder 的页面
55. * 3. 将 componentPlaceholder 配置同步到对应的页面 .json 文件
56. * 4. 如果页面 .json 文件不存在，则创建新文件
57. * 5. 如果已存在，则智能合并配置
58. */
59. export function syncPageConfig(options: SyncPageConfigOptions = {}): Plugin {
60.   const config = { ...DEFAULT_OPTIONS, ...options }
62.   // 如果插件被禁用，返回一个空插件
63.   if (!config.enable) {
64.     return {
65.       name: 'sync-page-config-disabled',
66.       apply: 'build',
67.       writeBundle() {
68.         // 插件已禁用，不执行任何操作
69.       },
70.     }
71.   }
73.   return {
74.     name: 'sync-page-config',
75.     apply: 'build', // 只在构建时应用
76.     enforce: 'post', // 在其他插件执行完毕后执行
78.     async writeBundle() {
79.       const { verbose, logPrefix, targetPlatform } = config
81.       try {
82.         // 获取项目根目录路径
83.         const projectRoot = process.cwd()
85.         // 构建模式：'build' (生产环境) 或 'dev' (开发环境)
86.         const buildMode = process.env.NODE_ENV === 'production' ? 'build' : 'dev'
87.         const platform = process.env.UNI_PLATFORM || targetPlatform
89.         // 只处理目标平台（默认微信小程序）
90.         if (platform !== targetPlatform) {
91.           // if (verbose) {
92.           //   console.log(`${logPrefix} 当前平台 ${platform} 不是目标平台 ${targetPlatform}，跳过同步`)
93.           // }
94.           return
95.         }
97.         // 构建 pages.json.js 文件路径 - 微信小程序生成的是 pages.json.js
98.         const pagesJsonPath = path.resolve(
99.           projectRoot,
100.           'dist',
101.           buildMode,
102.           platform,
103.           'pages.json.js',
104.         )
106.         // 检查 pages.json.js 是否存在
107.         const pagesJsonExists = await fs.pathExists(pagesJsonPath)
108.         if (!pagesJsonExists) {
109.           if (verbose) {
110.             console.warn(`${logPrefix} pages.json.js 不存在，跳过同步操作`)
111.             console.warn(`${logPrefix} 文件路径: ${pagesJsonPath}`)
112.           }
113.           return
114.         }
116.         // if (verbose) {
117.         //   console.log(`${logPrefix} 开始同步页面配置...`)
118.         //   console.log(`${logPrefix} 构建模式: ${buildMode}`)
119.         //   console.log(`${logPrefix} 目标平台: ${platform}`)
120.         //   console.log(`${logPrefix} pages.json.js 路径: ${pagesJsonPath}`)
121.         // }
123.         // 直接读取并解析 JavaScript 文件
124.         const fileContent = await fs.readFile(pagesJsonPath, 'utf8')
125.         const pagesJson = parseJavaScriptConfigFile(fileContent, verbose, logPrefix)
127.         if (!pagesJson) {
128.           console.error(`${logPrefix} ❌ 解析配置文件失败，无法继续`)
129.           return
130.         }
132.         // 调试：显示解析结果
133.         if (verbose) {
134.           // console.log(`${logPrefix} 解析成功，找到配置:`)
135.           // console.log(`${logPrefix} - 主包页面数: ${pagesJson.pages?.length || 0}`)
136.           // console.log(`${logPrefix} - 分包数量: ${pagesJson.subPackages?.length || 0}`)
138.           // 查找 me 页面
139.           const mePage = pagesJson.pages?.find((p: any) => p.path === 'pages/me/me')
140.           // if (mePage) {
141.           //   console.log(`${logPrefix} - 找到 me 页面: ${mePage.path}`)
142.           //   if (mePage.componentPlaceholder) {
143.           //     console.log(`${logPrefix} - me 页面有 componentPlaceholder:`, Object.keys(mePage.componentPlaceholder))
144.           //   }
145.           // }
146.         }
148.         let totalProcessed = 0
150.         // 处理主包页面
151.         if (pagesJson.pages && Array.isArray(pagesJson.pages)) {
152.           totalProcessed += await processPages(
153.             pagesJson.pages,
154.             path.resolve(projectRoot, 'dist', buildMode, platform),
155.             '',
156.             verbose,
157.             logPrefix,
158.           )
159.         }
161.         // 处理分包页面
162.         if (pagesJson.subPackages && Array.isArray(pagesJson.subPackages)) {
163.           for (const subPackage of pagesJson.subPackages) {
164.             if (subPackage.pages && subPackage.root) {
165.               const subPackageRoot = path.resolve(
166.                 projectRoot,
167.                 'dist',
168.                 buildMode,
169.                 platform,
170.                 subPackage.root,
171.               )
173.               totalProcessed += await processPages(
174.                 subPackage.pages,
175.                 subPackageRoot,
176.                 subPackage.root,
177.                 verbose,
178.                 logPrefix,
179.               )
180.             }
181.           }
182.         }
184.         // if (verbose) {
185.         //   console.log(`${logPrefix} ✅ 页面配置同步完成`)
186.         //   console.log(`${logPrefix} 共处理 ${totalProcessed} 个页面的 componentPlaceholder 配置`)
187.         // }
188.       }
189.       catch (error) {
190.         console.error(`${logPrefix} ❌ 同步页面配置失败:`, error)
191.         console.error(`${logPrefix} 错误详情:`, error instanceof Error ? error.message : String(error))
192.         console.error(`${logPrefix} 堆栈:`, error instanceof Error ? error.stack : '无堆栈信息')
193.         // 不抛出错误，避免影响整个构建过程
194.       }
195.     },
196.   }
197. }
199. /**
200. * 解析 JavaScript 配置文件
201. * 专门处理微信小程序的 pages.json.js 格式
202. */
203. function parseJavaScriptConfigFile(
204.   jsContent: string,
205.   verbose: boolean,
206.   logPrefix: string,
207. ): any {
208.   try {
209.     // 根据你提供的文件格式，这是一个 CommonJS 模块
210.     // 我们需要执行这个 JavaScript 代码来获取 exports
212.     // 方法1：使用 Function 构造函数创建一个安全的执行环境
213.     const moduleCode = `
214.       const exports = {};
215.       const module = { exports };
216.       ${jsContent};
217.       return module.exports;
218.     `
220.     const getModuleExports = new Function(moduleCode)
221.     const result = getModuleExports()
223.     // if (verbose) {
224.     //   console.log(`${logPrefix} 成功解析 JavaScript 配置文件`)
225.     // }
227.     return result
228.   }
229.   catch (error) {
230.     console.error(`${logPrefix} ❌ 解析 JavaScript 配置文件失败:`, error)
232.     // 方法2：尝试简单的正则解析（备选方案）
233.     try {
234.       const result: any = {}
236.       // 提取 pages 数组
237.       const pagesMatch = jsContent.match(/const pages = (\[[\s\S]*?\]);/)
238.       if (pagesMatch) {
239.         try {
240.           const pagesCode = pagesMatch[1]
241.           // 将 JavaScript 数组转换为 JSON
242.           const jsonStr = pagesCode
243.             .replace(/(['"])?(\w+)(['"])?\s*:/g, '"$2":')
244.             .replace(/'/g, '"')
245.             .replace(/,\s*\]/g, ']') // 移除尾随逗号
247.           result.pages = JSON.parse(jsonStr)
248.           // if (verbose) {
249.           //   console.log(`${logPrefix} 使用正则成功解析 pages`)
250.           // }
251.         }
252.         catch (e) {
253.           console.warn(`${logPrefix} ⚠️ 正则解析 pages 失败:`, e)
254.         }
255.       }
257.       // 提取 subPackages 数组
258.       const subPackagesMatch = jsContent.match(/const subPackages = (\[[\s\S]*?\]);/)
259.       if (subPackagesMatch) {
260.         try {
261.           const subPackagesCode = subPackagesMatch[1]
262.           const jsonStr = subPackagesCode
263.             .replace(/(['"])?(\w+)(['"])?\s*:/g, '"$2":')
264.             .replace(/'/g, '"')
265.             .replace(/,\s*\]/g, ']')
267.           result.subPackages = JSON.parse(jsonStr)
268.           // if (verbose) {
269.           //   console.log(`${logPrefix} 使用正则成功解析 subPackages`)
270.           // }
271.         }
272.         catch (e) {
273.           console.warn(`${logPrefix} ⚠️ 正则解析 subPackages 失败:`, e)
274.         }
275.       }
277.       if (result.pages || result.subPackages) {
278.         return result
279.       }
281.       throw new Error('两种解析方法都失败了')
282.     }
283.     catch (fallbackError) {
284.       console.error(`${logPrefix} ❌ 备用解析方案也失败:`, fallbackError)
285.       return null
286.     }
287.   }
288. }
290. /**
291. * 处理页面数组
292. */
293. async function processPages(
294.   pages: any[],
295.   baseDir: string,
296.   rootPath: string,
297.   verbose: boolean,
298.   logPrefix: string,
299. ): Promise<number> {
300.   let processedCount = 0
302.   // 安全检查：确保 pages 是数组
303.   if (!Array.isArray(pages)) {
304.     console.warn(`${logPrefix} ⚠️ pages 不是数组，跳过处理`)
305.     return 0
306.   }
308.   for (const page of pages) {
309.     // 安全检查：确保 page 是对象
310.     if (!page || typeof page !== 'object') {
311.       console.warn(`${logPrefix} ⚠️ 页面配置不是对象，跳过`)
312.       continue
313.     }
315.     // 检查是否有 componentPlaceholder 配置
316.     const hasPlaceholder = page.componentPlaceholder
317.       && typeof page.componentPlaceholder === 'object'
318.       && Object.keys(page.componentPlaceholder).length > 0
320.     if (hasPlaceholder) {
321.       try {
322.         // 获取页面路径，确保移除 .vue 扩展名
323.         let pagePath = page.path
324.         if (pagePath && typeof pagePath === 'string' && pagePath.endsWith('.vue')) {
325.           pagePath = pagePath.slice(0, -4) // 移除 .vue
326.         }
328.         if (!pagePath || typeof pagePath !== 'string') {
329.           console.warn(`${logPrefix} ⚠️ 页面路径无效: ${pagePath}`)
330.           continue
331.         }
333.         // 构建目标 .json 文件路径
334.         const jsonFilePath = path.join(baseDir, `${pagePath}.json`)
336.         // 确保目录存在
337.         await fs.ensureDir(path.dirname(jsonFilePath))
339.         // 读取或创建页面配置
340.         let pageConfig: any = {}
341.         if (await fs.pathExists(jsonFilePath)) {
342.           try {
343.             const existingContent = await fs.readFile(jsonFilePath, 'utf8')
344.             pageConfig = JSON.parse(existingContent)
345.           }
346.           catch (readError) {
347.             if (verbose) {
348.               console.warn(`${logPrefix} ⚠️ 无法读取现有配置文件 ${jsonFilePath}，将创建新配置`)
349.             }
350.           }
351.         }
353.         // 确保必要的字段存在
354.         if (!pageConfig.navigationBarTitleText && page.style?.navigationBarTitleText) {
355.           pageConfig.navigationBarTitleText = page.style.navigationBarTitleText
356.         }
358.         // 确保 usingComponents 存在
359.         if (!pageConfig.usingComponents) {
360.           pageConfig.usingComponents = {}
361.         }
363.         // 合并 componentPlaceholder
364.         const placeholder = page.componentPlaceholder || {}
365.         pageConfig.componentPlaceholder = {
366.           ...(pageConfig.componentPlaceholder || {}),
367.           ...placeholder,
368.         }
370.         // 写入文件
371.         await fs.writeFile(jsonFilePath, JSON.stringify(pageConfig, null, 2))
372.         processedCount++
374.         if (verbose) {
375.           const logRootPrefix = rootPath ? `[${rootPath}] ` : ''
376.           const placeholderCount = Object.keys(placeholder).length
377.           // console.log(`${logPrefix} ${logRootPrefix}✅ 已同步: ${pagePath} → ${placeholderCount} 个占位组件`)
378.         }
379.       }
380.       catch (pageError) {
381.         console.error(`${logPrefix} ❌ 处理页面 ${page?.path || '未知页面'} 失败:`, pageError)
382.       }
383.     }
384.     else if (verbose) {
385.       // 调试信息：显示没有 componentPlaceholder 的页面
386.       const logRootPrefix = rootPath ? `[${rootPath}] ` : ''
387.       // console.log(`${logPrefix} ${logRootPrefix}跳过: ${page.path || '未知页面'} (无 componentPlaceholder)`)
388.     }
389.   }
391.   return processedCount
392. }
394. /**
395. * 创建页面配置同步插件的便捷函数
396. *
397. * 这是一个便捷的工厂函数，用于快速创建插件实例
398. * 特别适用于在 vite.config.ts 中进行条件性插件配置
399. *
400. * 使用示例：
401. * ```typescript
402. * // 在 vite.config.ts 中
403. * plugins: [
404. *   // 仅在微信小程序平台启用
405. *   createSyncPageConfigPlugin(
406. *     UNI_PLATFORM === 'mp-weixin',
407. *     { verbose: mode === 'development' }
408. *   ),
409. * ]
410. * ```
411. */
412. export function createSyncPageConfigPlugin(
413.   enable: boolean = true,
414.   options: Omit<SyncPageConfigOptions, 'enable'> = {},
415. ): Plugin {
416.   return syncPageConfig({ enable, ...options })
417. }

复制代码

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！