一款自動生成 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', },]