动态生成 uniapp 配置文件 pages.json，方便项目管理

在用uni-app开发小程序项目中，按官方文档需要把所有页面路径都放到pages.json文件下，导致pages.json文件较大，可读性差。更主要的是多人开发时，合入代码时会产生冲突。有没有办法可以动态生成pages.json文件呢？

当然有，请看：https://blog.csdn.net/fungleo/article/details/105165774

这种方法需要运行项目之前先node router/build.js  事先生成pages.json文件。还有没有其他办法？ 请看下文：

 

uni-app自带一个webpack loader钩子文件pages.js，在项目根目录下建立pages.js（与pages.json同级）即可生效。通过此文件就可以把动态生成的pages对象覆盖掉pages.json文件。代码如下：

/*
 *uni-app自带一个webpack loader钩子文件pages.js，在项目根目录下建立pages.js（与pages.json同级）即可生效
 * pages.js要求CommonJS规范，直接通过module.exports输出一个钩子函数。
*/

let pages = require('./router/buildRouter.js')
module.exports = (pagesJson, loader) => {
	//此钩子函数必须返回一个json对象
	return pages
}

在项目根目录下新建router文件夹，并新建buildRouter.js文件，看下其内容：

/*此文件用来动态加载pages下的页面路径
 */
let pagesJson = {
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}
// /pages/目录下的模块名称
const mainPages = ['auth', 'set']
mainPages.forEach((item) => {
	const moduleRouter = require(`../pages/${item}/PagesConfig.js`)
	moduleRouter.forEach((subItem) => {
		pagesJson.pages.push(subItem)
	})
})


module.exports = pagesJson

在pages/目录下每个模块下新建一个PagesConfig.js文件，此文件用来管理此模块下的所有页面路径。我们遍历所有模块名把PagesConfig.js中的页面路径都放到pagesJson对象中，最后生成了完整的pages.json文件内容。

 

之后的开发中，如果在已有的模块中新增页面，只需把页面路径写入到对应模块的PagesConfig.js文件中，如果是新增模块的话，还需要把模块名称写入到buildRouter.js中的mainPages数组中。