vue2、vue3+uni-app项目对pages.json文件拆分、动态生成路由管理、分包配置管理

1.动态生成pages.json文件准备工作：

        

•  

  common/router/modules/*: 依据模块划分不同页面配置js文件
  
  common/router/index.js: 对应pages.js中除了页面pages配置的参数外，其他在pages.js文件中配置的参数都放这里面
  
  common/router/build.js：核心文件，主要是读取modules/目录下的文件以及router/index.js文件然后动态生成pages.json文件
  
  

  2.依据模块划分不同页面配置js文件

• index.js 
• 
• user.js
• 
• process.js
• 

3.index.js(配置pages.json)

4.build.js(动态生成pages.json文件)

const fs = require('fs')
const router = require('./index.js')
const home = require('./modules/index.js')
const user = require('./modules/user.js')
const process = require('./modules/process.js')

// 路由顺序
const allPageSetting = [
    home,
    user,
]

//加载子路由配置文件
const getRouter = () => {
    let router = []
    allPageSetting.forEach(item => {
        router = [...router, ...buildRouter(item)]
    })
    return router
}


//分包路由
const subPackagesPages = [
  process,
]

//加载需要分包的路由配置文件
const getSubPackagesRouter=()=>{
  let router = []
  subPackagesPages.forEach(item => {
      router = [...router, subPackagesBuildRouter(item)]
  })
  return router
}



// 构建分包页面路由
const subPackagesBuildRouter=(route)=>{
  const {baseUrl, children} = route
  const jo={
      root:baseUrl,
      pages:[]
  }
  children.forEach(item => {
      let obj = {};
      item.path ? obj.path = item.path : null;
      item.name ? obj.name = item.name : null;
      obj = {
          ...obj,
          style: {
              navigationBarTitleText: item.text
          }
      }
      item.style ? obj.style = item.name : null;
      jo.pages.push(obj)
  })

  return jo
}



//转化为pages.json文件格式
const buildRouter = route => {
    const res = []
    const {baseUrl, children} = route
    children.forEach(item => {
        let obj = {};
        item.path ? obj.path = baseUrl + item.path : null;
        item.name ? obj.name = item.name : null;
        obj = {
            ...obj,
            style: {
                navigationBarTitleText: item.text
            }
        }
        item.style ? obj.style = item.name : null;
        res.push(obj)
    })
    return res
}

//构建并写入 pages.json 文件
router.pages = getRouter()
router.subPackages = getSubPackagesRouter()
fs.rename('src/pages.json', 'src/pages.json.back', err => {
    if (err) {
        console.log(err)
    } else {
        console.log("pages.json文件备份成功！")
        fs.writeFile('src/pages.json',
            JSON.stringify(router, null, '  '),
            err => {
                err ? console.error(err) : console.log('pages.json文件更新成功!')
            }
        )
    }
})

---

5.配置package.json

6.执行测试

npm run serve  运行项目并动态生成pages.json

在已经运行的项目   npm run build:router   动态生成pages.json