uniapp读取复制pages.json成为路由文件-椰子皮

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你是很难获取这个文件里面的内容的。