使用 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',
  },
]

由於這個文件會由插件自動生成，因此你能夠在 .gitignore 文件中把這個路由文件在版本庫中忽略掉，避免多人協同開發時因頻繁改動發生衝突。

默認目錄約定

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',
})