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

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

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后,加载整个项目
    }
  },
}

已知问题:分包配置后无法读取static文件夹

如果你发现你分包后,在包文件下找不到 static ,那么你可能是将static文件配置错了。

解决方法:

static 在配置文件 packagePages 下,

所以,你这里的 root 根文件名 必须 和 packagePages一致

20210427190345822.png

uniapp 官网 subPackages 分包说明

相关文章
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
48 5
|
3月前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
2月前
vue3+uniapp配置路由导航守卫
vue3+uniapp配置路由导航守卫
|
6月前
uniapp配置tarBar
uniapp配置tarBar
89 0
|
4月前
|
小程序 UED
uniapp 添加分包页面,配置分包预下载
uniapp 添加分包页面,配置分包预下载
92 2
|
4月前
uniapp 制作 wgt 包(用于 app 的热更新)
uniapp 制作 wgt 包(用于 app 的热更新)
759 0
|
6月前
uniapp怎么实现分包
uniapp怎么实现分包
124 1
|
6月前
|
小程序 开发者
解决微信小程序因为包太大无法上传:uniapp分包
解决微信小程序因为包太大无法上传:uniapp分包
210 0
|
6月前
|
小程序 前端开发 UED
详细讲解uniapp转小程序分包教程!!!
详细讲解uniapp转小程序分包教程!!!
|
6月前
|
移动开发 监控 小程序
mPaaS常见问题之uniapp ios端云打包的配置config文件如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
183 0

热门文章

最新文章