一款自動(dòng)生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在項(xiàng)目中試點(diǎn)成功了，現(xiàn)在在項(xiàng)目中已經(jīng)不需要再維護(hù)路由配置文件了，由插件自動(dòng)生成，節(jié)省了大家維護(hù)路由的時(shí)間。

創(chuàng)新互聯(lián)不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對(duì)營(yíng)銷(xiāo)、技術(shù)、服務(wù)都有自己獨(dú)特見(jiàn)解，公司采取“創(chuàng)意+綜合+營(yíng)銷(xiāo)”一體化的方式為您提供更專(zhuān)業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)質(zhì)量和服務(wù)品質(zhì)，在得到用戶(hù)滿(mǎn)意的同時(shí)，也能得到同行業(yè)的專(zhuān)業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來(lái)將繼續(xù)專(zhuān)注于技術(shù)創(chuàng)新，服務(wù)升級(jí)，滿(mǎn)足企業(yè)一站式營(yíng)銷(xiāo)型網(wǎng)站需求，讓再小的成都品牌網(wǎng)站建設(shè)也能產(chǎn)生價(jià)值！

從長(zhǎng)遠(yuǎn)來(lái)看，使用插件自動(dòng)生成路由是具有一定好處的。當(dāng)項(xiàng)目中的路由配置非常多的時(shí)候，為了區(qū)分業(yè)務(wù)，你可能需要分成許多個(gè)文件來(lái)存放這些路由文件，這樣就不得不去維護(hù)這些路由文件。

比如這樣的路由文件結(jié)構(gòu)：

|-src/
  |-router/
    index.js
    childrenRouter.js
    childrenRouters/
      // ...some children router files

其中 childrenRouters 目錄中維護(hù)了各個(gè)業(yè)務(wù)相關(guān)的路由。

每當(dāng)要添加路由的時(shí)候，還得重復(fù)的寫(xiě) import 和路由配置項(xiàng)。

比如：

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',
 },
 // ...
]

當(dāng)一個(gè)項(xiàng)目的路由配置多了以后，要維護(hù)這些路由文件也是一件費(fèi)時(shí)費(fèi)神的事情。

現(xiàn)在使用 vue-route-webpack-plugin 插件來(lái)自動(dòng)生成路由后，就無(wú)需再關(guān)心和維護(hù)這些路由文件了。

使用方式

注：以下摘自倉(cāng)庫(kù) README，如有更新以倉(cāng)庫(kù)為準(zhǔn)

安裝

$ 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({
    // 選項(xiàng)，見(jiàn)下文
   })
  ],
 }
};

使用

在需要配置路由的頁(yè)面級(jí) .vue 文件中加入路由配置：

假設(shè)在 user.vue 文件中：

默認(rèn)情況下，當(dāng)你啟動(dòng)開(kāi)發(fā)服務(wù)或執(zhí)行構(gòu)建的時(shí)候，就會(huì)在 src/router 目錄下生成 children.js 這個(gè)路由文件。

假設(shè)你的頁(yè)面文件路徑是： src/views/user/list.vue ，那么生成的路由文件的內(nèi)容看起來(lái)就會(huì)是這樣的：

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

因?yàn)檫@個(gè)文件會(huì)由插件自動(dòng)生成，所以你可以在 .gitignore 文件中把這個(gè)路由文件在版本庫(kù)中忽略掉，避免多人協(xié)同開(kāi)發(fā)時(shí)因頻繁改動(dòng)發(fā)生沖突。

默認(rèn)目錄約定

src/
 |-views/     (項(xiàng)目文件，插件會(huì)掃描該目錄下所有 .vue 文件的路由配置)
  |-...
 |-router/    (路由目錄)
  |-index.js   (主路由文件，需要引入 children.js 作為子路由來(lái)使用)
  |-children.js (路由文件，由插件自動(dòng)生成)

選項(xiàng)參考

插件提供了以下這些選項(xiàng)供自定義配置

new VueRouteWebpackPlugin({
 // 文件擴(kuò)展名，默認(rèn)只查詢(xún) .vue 類(lèi)型的文件，根據(jù)實(shí)際需要可以進(jìn)行擴(kuò)展
 extension: ['vue', 'js', 'jsx'],
 // 插件掃描的項(xiàng)目目錄，默認(rèn)會(huì)掃描 'src/views' 目錄
 directory: 'src/views',
 // 生成的路由文件存放地址，默認(rèn)存放到 'src/router/children.js'
 routeFilePath: 'src/router/children.js',
})

總結(jié)

以上所述是小編給大家介紹的使用 webpack 插件自動(dòng)生成 vue 路由文件的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！