使用 webpack 插件自动生成 vue 路由文件的方法
一款自动生成 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 路由文件的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣的文章:
- HtmlWebpackPlugin插件使用实现html文件自动生成
- vue-cli项目打包多个与static文件同级的静态资源目录(copy-webpack-plugin插件的使用)
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
- vue使用prerender-spa-plugin预渲染插件,生成文件中有大量sourceURL片段的解决方法
- VUE打包后配置配置文件修改请求url方法及webpack打包的文件生成同名文件方法
- vue init webpack-simple 模板中全局引入Jquery正确使用方法 可保jQuery插件正常使用
- 博客开张,送上一个自动生成Web.sitemap文件的VS2005插件作为见面礼。
- 使用Mybatis Generator结合Ant脚本快速自动生成Model、Mapper等文件的方法
- java笔记之使用Mybatis-Generator自动生成Dao、Model、Mapping相关文件2种方法
- 使用webpack解析.vue文件注意事项
- 让 babel webpack vue 配置文件支持智能提示的方法
- 学习 webpack+vue.js (2、.vue文件的使用)
- vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码
- 浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
- webpack插件:使用HtmlWebpackPlugin在页面中使用EJS语法引用模板文件(二)
- (vue) 如何在webpack项目中使用axios 【两种方法都可行,已实测】
- 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- vue设置webpack文件别名+配置路由的默认class
- vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)