Skip to content

扫描文件中的路由配置并生成路由文件的一款 webpack 插件

Notifications You must be signed in to change notification settings

xiyun-international/vue-route-webpack-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-route-webpack-plugin

介绍

扫描项目中vue文件的路由配置并生成路由文件的一款 webpack 插件。

特性

使用插件后,只需在项目的.vue文件中加上这样的路由配置:

// 例如在 src/views/user/list.vue 文件中:

/**
 * 在会员列表文件中,声明该页面,对应的路由信息。
 * 支持一个页面有多个路由。
 * 
 * 简单配置:
 * 第二个参数将作为 alias
 * @route("user/list/:type")
 * @route("user/list", "user")
 * 
 * 如果需要额外的路由配置,可以使用对象形式的配置方式:
 * @route({
 *   path: "user/list",
 *   name: "user-list",
 *   alias: "user",
 *   // 注意:这里 meta 字段的值只支持一层对象
 *   meta: { 
 *     requiresAuth: true,
 *     userType: "member",
 *   }
 * })
 */

当启动开发服务或执行构建时,插件就会根据这个配置默认生成如下内容的名为children.js的路由文件:

// 生成的路由文件默认会放在:src/router/children.js,你可以使用选项来修改默认值
import userlist from "../views/user/list.vue";

export default [
  {
    path: "user/list/:type",
    component: userlist,
  },
  {
    path: "user/list",
    alias: "user",
    component: userlist,
  },
  {
    path: "user/list",
    alias: "user",
    name: "user-list",
    component: userlist,
    meta: { 
      requiresAuth: true,
      userType: "member",
    }
  },
]

就是这么简单,你无需再关心该从哪个目录import文件,更无需再写编写这些浪费时间的路由配置项。

使用方式

快速尝试

在仓库中有一个 example 目录,你可以将本项目克隆到本地后,进入到该目录下,执行:

$ yarn install
// 然后执行
$ yarn start 
// 或 
$ yarn build

执行完上述命令后,你就可以在src/router/目录下看到自动生成的路由文件了。 你可以自行修改views目录中的文件查看编译后的路由改动结果。

安装

$ 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>
/**
 * 
 * 简单配置:
 * 第二个参数将作为 alias
 * @route("user/list/:type")
 * @route("user/list", "user")
 * 
 * 如果需要额外的路由配置,可以使用对象形式的配置方式:
 * @route({
 *   path: "user/list",
 *   name: "user-list",
 *   alias: "user",
 *   // 注意:这里 meta 字段的值只支持一层对象
 *   meta: { 
 *     requiresAuth: true,
 *     userType: "member",
 *   }
 * })
 */
// 单行注释也是可以的
// @route("user/list/:type")
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/:type",
    component: userlist,
  },
  {
    path: "user/list",
    alias: "user",
    component: userlist,
  },
  {
    path: "user/list",
    alias: "user",
    name: "user-list",
    component: userlist,
    meta: { 
      requiresAuth: true,
      userType: "member",
    }
  },
]

因为这个路由文件是由插件自动生成的,所以你可以在 .gitignore 文件中把它在版本库中忽略掉,避免多人协同开发时因频繁改动发生冲突

如果使用了 eslint,同时忽略了路由文件,那么需要在 .eslintrs.js 中禁用掉这两个检查规则:

"import/no-unresolved": "off",
"import/extensions": "off",

默认目录约定

src/
  |-views/         (项目文件,插件会扫描该目录下所有 .vue 文件的路由配置)
    |-...
  |-router/        (路由目录)
    |-index.js     (主路由文件,需要引入 children.js 作为子路由来使用)
    |-children.js  (路由文件,由插件自动生成)

选项参考

插件提供了以下这些选项供自定义配置

new VueRouteWebpackPlugin({
  // 配置 import 路径前缀,默认是:"../",因为路由文件会默认放在 src/router/ 目录下
  prefix: "../",
  // 插件扫描的项目目录,默认会扫描 "src/views" 目录
  directory: "src/views",
  // 生成的路由文件存放地址,默认存放到 "src/router/children.js"
  routeFilePath: "src/router/children.js",
  // 生成的文件中的 import 路径是否使用双引号规范,默认使用
  // 注意:生成的路由文件中的 path 的引号是原封不动使用用户的
  doubleQoute: true,
})

About

扫描文件中的路由配置并生成路由文件的一款 webpack 插件

Resources

Stars

Watchers

Forks

Packages

No packages published