# pages.json模块化及热重载

解决uni-app的pages.json无法模块化的问题,并且解决模块热重载和缓存的问题

说明

该pages.json模块化及热重载方案来源于uni-app插件市场优秀的开源作品pages.json模块化及热重载 (opens new window)

# 准备工作

下载地址:pages模块化及热重载 (opens new window)

pages模块化及热重载文件解压后:

  1. pages 文件放置 根目录(项目名)/.dnvue/ 路径下(与vuex文件平级)。
  2. pages.js 文件放置 根目录(项目名)/ 路径下(与pages.json平级)。
┌─根目录
├───.dnvue
|     ├─common
|     ├─pages              //第一步:放置解压后获取的pages文件
|     |  ├─modules         //模块化js文件集
|     |  |   ├─index.js    //index.js模块,注意:添加或者移除内容均需要重新编译项目方可生效
|     |  |   └─xxx.js      //xxx.js模块
|     |  └─config.js       
|     └─vuex
├───pages 
├───static 
├───uni_modules
├───App.vue
├───main.js
├───manifest.json 
├───pages.js               //第二步:放置pages.js文件
├───pages.json  
└───uni.scss

# pages.json配置

在pages.json文件中将pages节点删除,只留下其他配置项即可。

pages.json示例:

{
	//其他配置均可在pages.json中配置
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

# index.js示例

模块化后的js文件格式示例,与原pages.json文件内pages节点配置 (opens new window)均一致。

注意:添加或者移除内容均需要重新编译项目方可生效

module.exports = [{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "index"
	}
}]

# 设置首页

pages.js 文件源码第 38 行设置

let pages = removeDuplicationAndSetIndexPage(
	[
		...basePages,
		...hotRequire('./.dnvue/pages/config.js')
	],
	// 设置首页路径
	'pages/index/index'
)

# 分包加载配置

pages.js 文件源码第 42 行配置分包加载

// 要输出的subPackages
let subPackages = [
	...baseSubPackages,
	// 这里是分包加载的subPackages...
	...hotRequire('分包的js文件路径')
]

JS示例,参考uni-app 官方文档 subPackages 分包加载配置 (opens new window)

module.exports = [{
	"root": "pages/API",
	"pages": [{
		"path": "login/login",
		"style": {
			"navigationBarTitleText": "授权登录"
		}
	}]
}]

# 条件编译

不支持条件编译,需要自己通过process.env.VUE_APP_PLATFORM来判断(不建议使用process.env.UNI_PLATFORM,因为在webpack客户端包里无法读取此环境变量, 除非设置DefinePlugin),自定义环境的需要自己添加env变量来判断

// #ifdef H5 || APP-PLUS
...(process.env.VUE_APP_PLATFORM === 'APP-PLUS' || process.env.VUE_APP_PLATFORM === 'H5' ? [{
	"path": "pages/about/about",
	"style": {
		"navigationBarTitleText": "关于"
	}
}] : []),
// #endif