使用 webpack 插件自动生成 vue 路由文件的方法
一款自动生成vue路由文件的webpack插件 vue-route-webpack-plugin在项目中试点成功了，现在在项目中已经不需要再维护路由配置文件了，由插件自动生成，节省了大家维护路由的时间。
从长远来看，使用插件自动生成路由是具有一定好处的。当项目中的路由配置非常多的时候，为了区分业务，你可能需要分成许多个文件来存放这些路由文件，这样就不得不去维护这些路由文件。
比如这样的路由文件结构：
|-src/ |-router/ index.js childrenRouter.js childrenRouters/ //...somechildrenrouterfiles
其中childrenRouters目录中维护了各个业务相关的路由。
每当要添加路由的时候，还得重复的写 import和路由配置项。
比如：
importuserlistfrom'@/views/user/list.vue';
importshoplistfrom'@/views/shop/list.vue';
importgoodslistfrom'@/views/goods/list.vue';
//import...
exportdefault[
{
path:'user/list',
name:'userlist',
component:userlist,
alias:'user',
},
{
path:'shop/list',
name:'shoplist',
component:shoplist,
alias:'shoplist',
},
//...
]
当一个项目的路由配置多了以后，要维护这些路由文件也是一件费时费神的事情。
现在使用 vue-route-webpack-plugin插件来自动生成路由后，就无需再关心和维护这些路由文件了。
使用方式
注：以下摘自仓库README，如有更新以仓库为准
安装
$yarnadd-D@xiyun/vue-route-webpack-plugin
配置
在 vue.config.js或在webpack配置文件中加入插件配置：
constVueRouteWebpackPlugin=require('@xiyun/vue-route-webpack-plugin');
module.exports={
configureWebpack:{
plugins:[
newVueRouteWebpackPlugin({
//选项，见下文
})
],
}
};
使用
在需要配置路由的页面级 .vue文件中加入路由配置：
假设在user.vue文件中：
user
默认情况下，当你启动开发服务或执行构建的时候，就会在 src/router目录下生成 children.js这个路由文件。
假设你的页面文件路径是： src/views/user/list.vue，那么生成的路由文件的内容看起来就会是这样的：
importuserlistfrom'@/views/user/list.vue';
exportdefault[
{
path:'user/list',
name:'userlist',
component:userlist,
//如果配置了别名
alias:'user',
},
]
因为这个文件会由插件自动生成，所以你可以在.gitignore文件中把这个路由文件在版本库中忽略掉，避免多人协同开发时因频繁改动发生冲突。
默认目录约定
src/ |-views/(项目文件，插件会扫描该目录下所有.vue文件的路由配置) |-... |-router/(路由目录) |-index.js(主路由文件，需要引入children.js作为子路由来使用) |-children.js(路由文件，由插件自动生成)
选项参考
插件提供了以下这些选项供自定义配置
newVueRouteWebpackPlugin({
//文件扩展名，默认只查询.vue类型的文件，根据实际需要可以进行扩展
extension:['vue','js','jsx'],
//插件扫描的项目目录，默认会扫描'src/views'目录
directory:'src/views',
//生成的路由文件存放地址，默认存放到'src/router/children.js'
routeFilePath:'src/router/children.js',
})
总结
以上所述是小编给大家介绍的使用webpack插件自动生成vue路由文件的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！