溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一款自動生成 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 路由文件的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
