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


Posted in Javascript onAugust 20, 2019

一款自动生成 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 路由文件的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 #Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 #Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 #Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 #Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 #Javascript
基于vue手写tree插件的那点事儿
Aug 20 #Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 #Javascript
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
ie6 动态缩略图不显示的原因
2009/06/21 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python实现合并两个排序的链表
2019/03/03 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python多线程同步实例教程
2019/08/11 Python
Python实现Restful API的例子
2019/08/31 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
2015年房地产销售工作总结
2015/04/20 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
Python实现简单的猜单词
2021/06/15 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android