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

一款自动生成 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>

默认情况下，当你启动开发服务或执行构建的时候，就会在 src/router 目录下生成 children.js 这个路由文件。

假设你的页面文件路径是： src/views/user/list.vue ，那么生成的路由文件的内容看起来就会是这样的：

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