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

2021-06-11 16:22
2534
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')
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: []
  }
}

 

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

 

 

 

 

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

 

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

    不错,必须顶一下!

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