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,
})