利用node读写文件的能力自动生成路由

vue项目中，路由文件会越来越大，维护越来与复杂，看着眼花缭乱。我们可以维护一份简单的路由文件，只包含路径，名称以及少量配置信息即可，利用node读写文件的能力，去自动生成我们所要使用的路由文件，示例如下：

let render = require('json-templater/string') 

let fs = require('fs')

let path = require('path')

let config = require('../src/router/PageConfig') // route配置js

 

const COMPONENTS_TEMPLATE = "{ path: '{{path}}', name: '{{name}}', component: () => import(/* webpackChunkName: \"{{name}}\" */ '@pages{{filePath}}'), meta: {{meta}} }"

const routeTemplate = [] // 存储利用以上模板生成的的route

config.map(route => { // 遍历配置文件

    let name = route.name // 名称

    let path = route.path // 路径

    let meta = route.meta || {}

    let filePath = route.filePath || route.path

    routeTemplate.push(render(COMPONENTS_TEMPLATE, { path: path, name: name, filePath: filePath, meta: JSON.stringify(meta) }))

})

 

const MAIN_TEMPLATE = `const config = [\n${routeTemplate.join(',\n')}];\nexport default config;\n` // 生成要输出的路由文件内容的字符串模板

fs.writeFileSync(path.join(__dirname, ../src/router/routeConfig.js), render(MAIN_TEMPLATE)) // 依据模板生成js