最近在写一个 Vue 插件，需要在项目中创建一些测试页面，由于都是些静态路由，就想到之前看到过的一个项目就是用 Node.js 来自动生成路由的，于是就借鉴过来改了一下。
源码
代码语言：javascript复制const fs = require('fs')
const os = require('os')
const vueDir = './src/views/'
const routerFile = './src/router.js'
fs.readdir(vueDir, function (err, files) {
if (err) {
console.error(' Could not list the directory.', err)
return
}
const routes = []
for (const filename of files) {
if (filename.indexOf('.') < 0) {
continue
}
const [name, ext] = filename.split('.')
if (ext !== 'vue') {
continue
}
const routeName = name.replace(/-([a-z])/g, (_, match) => match.toUpperCase())
let routeDescription = ''
const contentFull = fs.readFileSync(`${vueDir}${filename}`, 'utf-8')
// get route description from first line comment
const match = /<!--s*(.*)s*-->/g.exec(contentFull.split(os.EOL)[0])
if (match) {
routeDescription = match[1].trim()
}
routes.push(` {
path: '/${name === 'home' ? '' : name}',
name: '${routeName}',${routeDescription ? `n description: '${routeDescription}',` : ''}
component: () => import(/* webpackChunkName: "${routeName}" */ '@/views/${filename}'),
},`)
}
const result =
`// This file is automatically generated by gen-router.js, please do not modify it manually！
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
const routes = [
${routes.join(os.EOL)}
]
const router = new VueRouter({
mode: 'hash',
routes,
})
export default router
`
fs.writeFile(routerFile, result, 'utf-8', (err) => {
if (err) throw err
console.log(` Router generated successfully in ${routerFile}`)
})
})生成效果如下：
代码语言：javascript复制// This file is automatically generated by gen-router.js, please do not modify it manually！
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
description: 'Home',
component: () => import(/* webpackChunkName: "home" */ '@/views/home.vue'),
},
]
const router = new VueRouter({
mode: 'hash',
routes,
})
export default router参考
sunzsh/vue-el-demo
