根据vue自动生成路由文件脚本
前言
在vue开发过程中,往往需要写一个vue然后写一个对应的路由,这很痛苦,那么有什么办法可以自动生成路由文件么?它来了!
要求环境
首先,必须有node环境,不然就白玩了
脚本内容
在项目根目录下创建一个gen-router.js文件,内容如下:
var fs = require('fs'); const readline = require('readline'); const os = require('os'); const vueDir = './src/views/'; fs.readdir(vueDir, function (err, files) { if (err) { console.log(err); return; } let routers = ``; for (const filename of files) { if (filename.indexOf('.') < 0) { continue; } var [name, ext] = filename.split('.'); if (ext != 'vue') { continue; } let routerName = null const contentFull = fs.readFileSync( `${vueDir}${filename}`, 'utf-8' ); var match = /\<\!\-\-\s*(.*)\s*\-\-\>/g.exec(contentFull.split(os.EOL)[0]); if (match) { routerName = match[1]; } routers += ` {path: '/${name === 'home' ? '' : name}', component: ()=> import(/* webpackChunkName: "${name}" */ "@/views/${filename}") ${ routerName ? ',name: "' + routerName + '"' : ''} },\n`; } const result = `// 该文件由gen-router.js自动生成,请勿手动修改 import VueRouter from 'vue-router' import Vue from 'vue' Vue.use(VueRouter) var routes = [ ${routers} ]; const router = new VueRouter({ mode: 'hash', routes }) export default router ` fs.writeFile('./src/router.js',result, 'utf-8', (err) => { if (err) throw err; // 如果没有错误 console.log("./src/router.js 生成成功!") }); });
然后再修改package.json中的script字段:
"scripts": { "serve": "node gen-router.js && vue-cli-service serve", "build": "node gen-router.js && vue-cli-service build", "genmenu": "node gen-router.js", },
这样就大功告成了,运行命令
npm run genmenu
即可在src目录下生成一个router.js路由文件
如果你需要生成一个【\】这样的首页路由,那么vue的文件名必须是【home.vue】
如果你需要在router.js路由中有个name字段,那么在vue文件中第一行编写注解
<!--首页-->
那么生成的就是下面这种效果了
{path: '/', component: ()=> import(/* webpackChunkName: "home" */ "@/views/home.vue") ,name: "首页" },
评论