vue-auto-routes-webpack-plugin

根据指定目录自动生成 vue-router 配置

  npm i --save-dev vue-auto-routes-webpack-plugin

  yarn add --dev vue-auto-routes-webpack-plugin

插件会从指定入口遍历读取[.vue]文件并在指定目录输出一个 vue-router 配置文件。部分路由配置也可在组件内通过 [$$route] 属性声明。

目录示例

src
├── route
│   └── index.js
│   └── routes.js
├── views
    ├── Login.vue  
    ├── main
    │    ├── Index.vue
    │    ├── List.vue
    │    ├── subDir
    │    │   ├── Index.vue
    │    │   └── Order.vue
    │    │
    │    └── otherSubDir
    │
    ├── otherDir
    └── ...

webpack.config.js

const path = require('path');
const VueAutoRouteWebpackPlugin = require('vue-auto-routes-webpack-plugin')

function resolve(_path) {
  return path.resolve(__dirname, _path);
}

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new VueAutoRouteWebpackPlugin({
      entry: resolve('src/views/'),
      output: resolve('src/route/routes.js'),
      rootComponent: 'Login',
      indexComponent: 'Index',
      useFileName: true,
      layouts:{
        main:reslove('src/layout/index')
      }
    })
  ]
}

插件会在 [output] 目录下生成 [routes.js] 文件，大概像这样

src/route/routes.js

export default [{
  "name": "Login",
  "path": "/",
  "components": {
    default: require('/Users/mac/Documents/project-formal/auto-vue-router/src/views/Login.vue').default
  },
  "meta": null
}, {
  "path": "/main",
  "children": [{
    "name": "List",
    "path": "List",
    "components": {
      default: require('/Users/mac/Documents/project-formal/auto-vue-router/src/views/main/List.vue').default
    },
    "meta": null
  }, {
    "path": "sub",
    "children": [],
    "components": {
      default: require('/Users/mac/Documents/project-formal/auto-vue-router/src/views/main/sub/Index.vue').default
    },
    "name": "sub/Index",
    "meta": null
  }],
  "components": {
    default: require('/Users/mac/Documents/project-formal/auto-vue-router/src/views/main/Index.vue').default
  },
  "name": "/main/Index",
  "meta": null
}]

然后你就可以直接使用这份配置了

src/route/index.js

import Vue from 'vue'
import Router from 'vue-router'

import routes from './routes'

Vue.use(Router);

routes.push({
  path: '*',
  redirect: '/'
})

export default new Router({
  routes: routes
});

你还可以在 [.vue] 组件内定义路由的相关信息，但这也不是必须的，只有你需要时才这么做

export default {
  name:'login',
  $$route:{
    name:'Login',
    lazy:true,
    meta:{
      label:'登录'
    }
  }

}

|Name|Type|Default|Description|Required| |:--:|:--:|:-----:|:----------|:--| |entry|{String}|无|路由页面的入口路径|Yes| |output|{String}|无|配置文件输出路径|Yes| |rootComponent|{String}|Login|根路由下的组件，也就是当路由为/时的页面，【不要】带有.vue后缀哦|Yes| |indexComponent|{String}|Index|多级路由时，需要为每级路由提供一个入口，用于放置<router-view />承载子路由，【不要】带有.vue后缀哦|No| |useFileName|{Boolean}|false|是否使用文件名作为路由名称|No| |ignoreDir|{String}|components|在插件遍历目录时，需要忽略的目录，目前只支持忽略一个|No| |propsKeyName|{String}|$$route|组件内的路由配置key name,有需要可以更换|No| |layouts|{Object}|{}|公用布局配置，可在 indexComponent 组件中通过 $$route.layout 来设置当前路由需要使用的布局 |No|

export default {
  // $$route 仅在需要的时候才配置，它并不是必须有的；
  // $$route 可以通过修改插件配置自定义keyName，必须是一个纯对象。
  $$route:{
    // 路由名称，同 vue-router 的 name；
    name:'Login',
    // 是否懒加载
    // 1、true => 需要懒加载，但不指定包名；  
    // 2、String => 需要懒加载，且值为包名。 包名指的是 webpack 使用 import() 分包加载时需要配置的 [webpackChunkName]；
    // 【重点强调】：lazy 只支持 布尔值-true 或 其它任意字符串；
    lazy:true,
    //同 vue-router 的 meta；
    meta:{
      label:'登录'
    },
    // 同 vue-router 的 path
    path:'/',
    // 同 vue-router 的 redirect
    redirect:'/login',
    // 同 vue-router 的 alias
    alias:'',
    // 仅在 indexComponent 组件中使用才有效
    layout:'main'

  }

}

• 作者能力和时间有限，暂时不支持 vue-router 的 命名视图 ，这个用到的也比较少；
• 每次项目启动或有文件删除时，插件会遍历所有目录和文件。但如果只是修改了文件，插件会自动diff变动文件的[$$route]配置并更新；
• 其它不懂的可以先看 demo 。