使用 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 路由文件的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

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

推荐度：

点击下载本文 文档为doc格式

标签：文件使用 VUE

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐