根据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: "首页" },