uni-app 分包、拆包的一些经验

场景

能看见的一级页面写src/pages/，看不到的二级页面写src/packageGame …

代码结构

src/
├── static/ # 所有静态资源放这里
│   ├── images/
│   │   ├── common/ # 公共图片
│   │   ├── order/ # 订单相关图片
│   │   └── exchange/ # 兑换相关图片
│   └── icons/
├── packageGame/ # 分包（只放页面和组件）
│   └── pages/
│       └── start/
│           └── index.vue
├── pages/  # 主包

注意，分包里面不要放图片，packageGame/static，图片访问不到（也有可能是路径写错了，DeepSeek🐳 反正是不建议，只建议放 pages …）

配置

pages.json配置和pages/一层

{
  "pages": [
    {
      "path": "pages/home/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "subPackages": [
    {
      "root": "packageGame",
      "pages": [
        {
          "path": "pages/a/index",
          "style": {}
        },
        {
          "path": "pages/b/index",
          "style": {}
        }
      ],
      "name": "Some modules"
    }
  ]
}

跳转方式

• 同一个包里面，不用斜线 -> {url: ‘b/index’}

• 不同的包，带斜线，加分包名 -> {url: ‘/packageGame/pages/b/index’}

Q&A

• Q: 分包能访问全局的store吗？

• A: 能 …