logo


  • 首页
  • 文章 
    • vue
    • app
    • node
    • 生活
    • 小程序
    • javascript
    • uniapp
  • 案例 
    • app
    • 小程序
    • pc
  • 相册
  • 友链
  • 留言
  • 微语
  • 关于

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

 2021-06-11
 椰子皮
 1
 1852
“ 我们发现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

uniappnode
 js查找出现次数最多的字符并统计次数
 vue3+ts封装钉钉扫码登录
共有 1 条评论
 发表评论
  • 10078#
    自媒体运营
    自媒体运营
    •  2021-12-09
    •  河南省南阳市方城县
    •  Win10
    不错,必须顶一下!



表情
 不支持canvas
椰子皮
椰子皮
觉得不错就点个赞吧
 226
 关注 公众号
1691 运行天数
27 今日pv
60 文章数量
 最近更新
 2022-03-31 08:59 更新了 文章
 在nuxt3里useFetch封装一个api接口http请求

 最新微语
  • 最近在使用eeg.js + vue3.0 2022-01-12
  • 把清新风格改为毛玻璃效果,虽然有点卡,但 2020-05-31
  • 本站春季主题已完成,大家觉得怎样。 2020-03-15
 最新评论
  • joker
    joker Win10 2022-04-11
    文章 这样取的到值吗?试了一下 在页面上打印data 为null ,是我哪里有问题吗
  • undefined
    undefined Win10 2022-02-21
    文章 h5也不支持keyboardheightchange
  • 自媒体运营
    自媒体运营 Win10 2021-12-09
    文章 不错,必须顶一下!
 最多点赞
 最多评论
  • vue3.0+typescript使用tinymce富文本编辑器
    vue3.0+typescript使用tinymce富文...
    2020-06-09 赞:23
  • 全新椰子皮博客版本介绍及说明。
    全新椰子皮博客版本介绍及说明。...
    2017-11-23 赞:20
  • vuex action 与mutations 的区别
    vuex action 与mutations 的区别...
    2018-06-24 赞:18
  • 让height:auto有过度效果
    让height:auto有过度效果...
    2017-12-22 赞:
  • css3使用transform: scale 元素出现偏移
    css3使用transform: scale 元素出现偏...
    2018-03-10 赞:
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:
 标签
前端 算法 uniapp javascript typescript 小程序 app vue nuxt node
 友情链接
申请
mashihuan Khari & Yaru 美好记忆 帅气的木木 大蒜博客 Aquan 快乐编程 fivewoods Paul 贺德强 太傅博客 梁巨才博客 jielin littlewin IT技术宅
首页 申请友链 关于本站
CopyRight © 2016-2021 - 椰子皮 - 浙ICP备16003960号