uniapp分包操作

项目结构

例如我项目有三个页面分别为

• pages/home/home.vue
• pages/index/index.vue
• pages/page/page.vue

我希望pages为主包,下面有一个index.vue页面,otherOne为分包一里面有home.vue一个页面,otherTwo为分包二里面有page.vue这一个页面

开启分包配置

在manifest.json里面的源码视图里面找到"mp-weixin"新增一个参数optimization，如下所示

	"mp-weixin": {
		"appid": "wxe6b82b61913bb296",
		"setting": {
			"urlCheck": false
		},
		"usingComponents": true,
		"optimization": {
			"subPackages": true //是否启用分包优化
		}
	},

创建分包目录

在根目录下分别创建otherOne和otherTwo目录

把需要放到相应分包的页面拖到分包文件夹内

• 在otherOne下面创建home文件夹，然后将pages/home/home.vue文件拖入进来即可
• 在otherTwo下面创建page文件夹，然后将pages/page/page.vue文件拖入进来即可

此时页面处理后，三个页面位置分别为

• otherOne/home/home.vue（分包一）
• otherTwo/page/page.vue（分包二）
• pages/index/index.vue（主包）

处理页面

在pages.json里面对页面进行处理

原来内容为：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path" : "pages/home/home",
			"style" : 
			{
				"navigationBarTitleText" : ""
			}
		},
		{
			"path" : "pages/page/page",
			"style" : 
			{
				"navigationBarTitleText" : ""
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

分包后页面处理如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
		"subPackages": [
			{
				"root": "otherOne", // 子包根目录
				"pages": [
					{
						"path": "home/home", // 配置页面路径，因为root已经选中了文件夹，所以这里只需要填写文件名称即可
						"style": {
							"navigationBarTitleText": "",
							"enablePullDownRefresh": false
						}
					}
				]
			},
			{
				"root": "otherTwo", // 子包根目录
				"pages": [
					{
						"path": "page/page", // 配置页面路径，因为root已经选中了文件夹，所以这里只需要填写文件名称即可
						"style": {
							"navigationBarTitleText": "",
							"enablePullDownRefresh": false
						}
					}
				]
			}
		],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}