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

來源：懂視網責編：小采時間：2020-11-27 21:52:05

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

使用 webpack 插件自動生成 vue 路由文件的方法:一款自動生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在項目中試點成功了，現在在項目中已經不需要再維護路由配置文件了，由插件自動生成，節省了大家維護路由的時間。從長遠來看，使用插件自動生成路由是具有一定好處的。當項目中的路由配

推薦度：

點擊下載本文 文檔為doc格式

導讀使用 webpack 插件自動生成 vue 路由文件的方法:一款自動生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在項目中試點成功了，現在在項目中已經不需要再維護路由配置文件了，由插件自動生成，節省了大家維護路由的時間。從長遠來看，使用插件自動生成路由是具有一定好處的。當項目中的路由配

一款自動生成 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 路由文件的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：文件使用 VUE

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦