uniapp读取复制pages.json成为路由文件
“
我们发现uniapp在真机里面获取不到路由列表,想获取页面标题也取不到,为了解决这个问题突发奇想用webpack来解决问题,后面发现webpack的复制功能只会在打包的时候运行,然后就想到了用node的fs模块
”

本文方法是在项目运行的时候同步pages.json内容到router,如果你更改了pages.json,就重新启动一下项目
先在项目根目录创建一个router文件夹,在vue.config.js里面加入如下代码
const path = require('path')
const fs = require('fs')
const fromFile = path.join(__filename, '../pages.json')
const toFile = path.join(__filename, '../router/index.js')
const buffPrefix = Buffer.from('export default ')
const fileData = fs.readFileSync(fromFile)
// 转成可读的js, 正则删除注释, 不然JSON.parse会报错
const fileObj = JSON.parse(fileData.toString().replace(/\/\/.*/g, ''))
// 遍历,只取路径和标题,其他的不要,已减小文件体积
const routes = fileObj.pages.map(e => {
return {
title: e.style ? e.style.navigationBarTitleText : '未知',
path: e.path,
}
})
// 如果有分包
if (fileObj.subPackages) {
fileObj.subPackages.forEach(e => {
e.pages.forEach(i => {
routes.push({
title: i.style ? i.style.navigationBarTitleText : '未知',
path: e.root + '/' + i.path,
})
})
})
}
fs.writeFileSync(toFile, buffPrefix + Buffer.from(JSON.stringify(routes)))
module.exports = {
configureWebpack: {
plugins: []
}
}
其实是利用nodejs的fs模块读取pages.json的内容,使用Buff添加export default前缀写入一个新的文件,如果你不添加export default你是很难获取这个文件里面的内容的。
这样的话就可以拿到页面标题进行埋点操作了,也可以进行路由鉴权
2