使用 webpack 插件自动生成 vue 路由文件的方法

|-src/
  |-router/
    index.js
    childrenRouter.js
    childrenRouters/
      // ...some children router files

import userlist from '@/views/user/list.vue';
import shoplist from '@/views/shop/list.vue';
import goodslist from '@/views/goods/list.vue';
//import ...

export default [
 {
  path: 'user/list',
  name: 'userlist',
  component: userlist,
  alias: 'user',
 },
 {
  path: 'shop/list',
  name: 'shoplist',
  component: shoplist,
  alias: 'shoplist',
 },
 // ...
]

const VueRouteWebpackPlugin = require('@xiyun/vue-route-webpack-plugin');

module.exports = {
 configureWebpack: {
  plugins: [
   new VueRouteWebpackPlugin({
    // 选项，见下文
   })
  ],
 }
};

<template>
 <div>user</div>
</template>
<script>
// @route('user/list')
// 或
// 第二个参数是路由别名
// @route('user/list', 'user')
// 或使用多行注释
/**
 * @route('user/list')
 * 或
 * @route('user/list', 'user')
 */
export default {
 name: 'user',
 data() {
  return {}
 }
}
</script>

import userlist from '@/views/user/list.vue';
export default [
 {
  path: 'user/list',
  name: 'userlist',
  component: userlist,
  // 如果配置了别名
  alias: 'user',
 },
]

src/
 |-views/     (项目文件，插件会扫描该目录下所有 .vue 文件的路由配置)
  |-...
 |-router/    (路由目录)
  |-index.js   (主路由文件，需要引入 children.js 作为子路由来使用)
  |-children.js (路由文件，由插件自动生成)

new VueRouteWebpackPlugin({
 // 文件扩展名，默认只查询 .vue 类型的文件，根据实际需要可以进行扩展
 extension: ['vue', 'js', 'jsx'],
 // 插件扫描的项目目录，默认会扫描 'src/views' 目录
 directory: 'src/views',
 // 生成的路由文件存放地址，默认存放到 'src/router/children.js'
 routeFilePath: 'src/router/children.js',
})