一款自動生成 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',})總結
以上所述是小編給大家介紹的使用 webpack 插件自動生成 vue 路由文件的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
