一款自动生成 vue 路由文件的 webpack 插件
vue-route-webpack-plugin 在项目中试点成功了，现在在项目中已经不需要再维护路由配置文件了，由插件自动生成，节省了大家维护路由的时间。从长远来看，使用插件自动生成路由是具有一定好处的。当项目中的路由配置非常多的时候，为了区分业务，你可能需要分成许多个文件来存放这些路由文件，这样就不得不去维护这些路由文件。
比如这样的路由文件结构：
|-src/
|-router/
index.js
childrenRouter.js
childrenRouters/
// ...some children router files其中
childrenRouters 目录中维护了各个业务相关的路由。每当要添加路由的时候，还得重复的写 import 和路由配置项。
比如：
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',
},
// ...
]
当一个项目的路由配置多了以后，要维护这些路由文件也是一件费时费神的事情。
现在使用 vue-route-webpack-plugin 插件来自动生成路由后，就无需再关心和维护这些路由文件了。
使用方式
注：以下摘自仓库 README，如有更新以仓库为准
安装
$ yarn add -D @xiyun/vue-route-webpack-plugin配置
在 vue.config.js 或在 webpack 配置文件中加入插件配置：
const VueRouteWebpackPlugin = require('@xiyun/vue-route-webpack-plugin');module.exports = {
configureWebpack: {
plugins: [
new VueRouteWebpackPlugin({
// 选项，见下文
})
],
}
};
使用
在需要配置路由的页面级 .vue 文件中加入路由配置：
假设在 user.vue 文件中：
<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>
