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

kviccn 发布于2019-08-26 14:04 / 982人阅读

摘要：从长远来看，使用插件自动生成路由是具有一定好处的。现在使用插件来自动生成路由后，就无需再关心和维护这些路由文件了。

一款自动生成 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 文件中：

默认情况下，当你启动开发服务或执行构建的时候，就会在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",
})

云服务器混合云 vue插件 webpack使用 webpack 使用公用cdn vue使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109985.html

【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏

摘要：如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好，此前看过很多专栏以及文章，此次实践中还是遇到需要学习的部分。包括因为可能信息面不全，对插件源码进行了详细解读，希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏前言骨架屏的用户感知比loading更好，此前看过很多专栏以及文章，此次实践中还是...

huhud 2019-08-02 16:07 评论0 收藏0
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏

摘要：如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好，此前看过很多专栏以及文章，此次实践中还是遇到需要学习的部分。包括因为可能信息面不全，对插件源码进行了详细解读，希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏前言骨架屏的用户感知比loading更好，此前看过很多专栏以及文章，此次实践中还是...

MkkHou 2019-08-23 14:07 评论0 收藏0
vue开发看这篇文章就够了

摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？ Library 库，本质上是一...

fsmStudy 2019-08-21 18:37 评论0 收藏0
webpack+vue项目实战（一,搭建运行环境和相关配置）

摘要：运行环境是，其它版本的小小伙伴要注意版本兼容的问题喔好了，首页在创建项目目录，下面进行项目的第一步，搭建环境。附上代码附上代码路由控制和接下来就配置入口文件，和入口文件的模板了。 1.前言现在正在开发一个公司的后台管理项目，项目是一个单页面应用。功能上就是管理销售订单的各个环节，包括物流管理，回款管理，订单管理等等的功能。这些就不多说了。项目是，基于webpack3,vue2.2.6...

jemygraw 2019-08-20 17:44 评论0 收藏0
详解Vue服务端渲染

摘要：二服务端渲染初体验使用的服务端渲染功能，需要引入提供的服务端渲染模块，其作用是创建一个渲染器，该渲染器可以将实例渲染成字符串。详解Vue服务端渲染一、服务端渲染 - 简介所谓服务端渲染就是将代码的渲染交给服务器，服务器将渲染好的html字符串返回给客户端，再由客户端进行显示。服务器端渲染的优点有利于SEO搜索引擎优化，因为服务端渲染是将渲染好的html字符串返回给了客户端，...

Paul_King 2019-08-26 10:33 评论0 收藏0