uniapp读取复制pages.json成为路由文件

2021-06-11 16:22
椰子皮
4318
1
2

我们发现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')

function createRouter() {
	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,
	      })
	    })
	  })
	}

	// 如果router目录不存在就创建目录
	if (!fs.existsSync(toFile)) {
		fs.mkdirSync(path.join(__dirname, 'router'))
	}

	fs.writeFileSync(toFile, buffPrefix + String(Buffer.from(JSON.stringify(routes))))
}

// 监听pages.json改动
if (process.env.NODE_ENV !== 'production') {
  fs.watchFile(fromFile, () => {
  	createRouter()
  	console.log('路由文件更新')
  })
}

createRouter()

module.exports = {
  configureWebpack: {
    plugins: []
  }
}

 

其实是利用nodejsfs模块读取pages.json的内容,使用Buff添加export default前缀写入一个新的文件,如果你不添加export default你是很难获取这个文件里面的内容的。

 

 

 

 

这样的话就可以拿到页面标题进行埋点操作了,也可以进行路由鉴权

 

支付宝微信
2
关注公众号获取更多内容
vue3+ts封装钉钉扫码登录
结合lazyload实现文章页里面的图片预加载
共有 1 条评论
发表评论
  • 自媒体运营#10078
    2021-12-09 20:56
    河南省南阳市方城县
    Win10

    不错,必须顶一下!

总共 1
  • 1
不支持canvas
春季
夏季
秋季
冬季
暗黑
简约
小清新