uniapp如何分包 & 分包配置后无法读取static文件夹

最新推荐文章于 2025-06-01 13:15:30 发布

「已注销」

最新推荐文章于 2025-06-01 13:15:30 发布

阅读量2.9w

点赞数 11

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/m0_46442996/article/details/116207284

小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在uniapp中使用分包的原因，主要是为了解决小程序体积过大导致的加载问题。作者详细展示了分包的文件目录结构，并提供了`pages.json`配置示例，包括分包页面和预加载规则。同时，文章指出分包后static资源无法读取的常见错误，强调了static目录应在每个分包内正确配置。最后，提供了官方文档链接以供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 为什么会使用uniapp分包？

最近因为使用uniapp做小程序，所以后面在程序发布预览时，经常出现：微信小程序Error系统错误,source size 2126KB exceed max limit 2MB等问题；
…
而我最初的解决方案是使用压缩工具的；
…
但是在后来随着文件图片增多，这种方案的弊端就很明显了；
…
故而，就想到了分包。

2. 分包文件目录配置结构：

┌─pages     //  根文件         
│  ├─index 
│  │  └─index.vue  
│  ├─mine 
│  │  └─mine.vue   
│  ├─home
│  │  └─home.vue     
│  └─login
│     └─login.vue   
│  
├─packagePages   // 包 - 即就是你提取出来的页面及数据
│  ├─static   // 当前包所依赖的资源
│  └─pages  // 当前包的页面文件
│  ├─index 
│  │  └─index.vue  
│  ├─other 
│  │  └─other.vue   
│ 
├─pagesB    // 可以分多个包文件
│  ├─static
│  └─detail
│     └─detail.vue  
│ 
├─static         // 项目的主资源文件夹    
├─main.js       // 下面的就不说了
├─App.vue          
├─manifest.json  
└─pages.json

3. pages 配置详解：

// pages.json
{
"pages":[{ // 与默认配置一致
			"path": "pages/index",
			"style": {
				"navigationStyle": "custom"
			}
		}],
"subPackages":[{
		"root": "packagePages", // 当前包的根目录文件
		"pages":[{  // 当前包的页面配置
			"path": "pages/index",
		}]
}],
"preloadRule": {
		"packagePages/index/index": {// 分包中的主目录
			"network": "all",// 默认all，即适用所有网络
			"packages": ["__APP__"]// 进入packagePages/index/index后，加载整个项目
		}
	},
}