A web pack plug-in that automatically generates vue routing files vue-route-webpack-plugin The pilot project has been successful, and now there is no need to maintain the routing configuration file in the project. It is automatically generated by plug-ins, which saves the time of routing maintenance.

In the long run, using plug-ins to automatically generate routing has certain advantages. When there are many routing configurations in the project, in order to differentiate business, you may need to divide into many files to store these routing files, so you have to maintain these routing files.

For example, such a routing file structure:

|-src/
    |-router/
        index.js
        childrenRouter.js
        childrenRouters/
            // ...some children router files

The child Routers directory maintains various business-related routes.

Whenever routing is added, import and routing configuration items are written repeatedly.

For example:

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',
  },
  // ...
]

When a project has more routing configurations, maintaining these routing files is also a time-consuming and laborious matter.

Now use vue-route-webpack-plugin After the plug-in generates the routing automatically, it is no longer necessary to care about and maintain these routing files.

Usage

Note: The following is taken from the warehouse README. Updates are based on the warehouse.

install

$ yarn add -D @xiyun/vue-route-webpack-plugin

To configure

Add plug-in configuration in vue.config.js or webpack configuration file:

const VueRouteWebpackPlugin = require('@xiyun/vue-route-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new VueRouteWebpackPlugin({
        // Options, see below
      })
    ],
  }
};

Use

Add routing configuration to the page-level.vue file where routing needs to be configured:

<template>
  <div>user</div>
</template>
<script>
// @route('user/list')
// or
// The second parameter is the routing alias
// @route('user/list', 'user')

// Or use multi-line comments
/**
 * @route('user/list')
 * or
 * @route('user/list', 'user')
 */
export default {
  name: 'user',
  data() {
    return {}
  }
}
</script>

By default, when you start a development service or perform a build, the routing file children.js is generated in the src/router directory.

Assuming that your page file path is src/views/user/list.vue, the content of the generated routing file will look like this:

import userlist from '@/views/user/list.vue';

export default [
  {
    path: 'user/list',
    name: 'userlist',
    component: userlist,
    // If aliases are configured
    alias: 'user',
  },
]

Because this file will be automatically generated by plug-ins, you can omit this routing file in the. gitignore file in the version library to avoid conflicts due to frequent changes in multi-person collaborative development.

Default directory Convention

src/
  |-views/         (Project files, the plug-in scans all the files in that directory .vue Routing configuration of files)
    |-...
  |-router/        (Routing directory)
    |-index.js     (Main routing file, need to be introduced children.js Use as a subrouting)
    |-children.js  (Routing files, automatically generated by plug-ins)

Option Reference

The plug-in provides the following options for custom configuration

new VueRouteWebpackPlugin({
  // File extension, by default only queries. vue type files, according to actual needs can be extended
  extension: ['vue', 'js', 'jsx'],
  // Plug-in scans the project directory, which by default scans the'src/views'directory
  directory: 'src/views',
  // The generated routing file is stored at the address by default in'src/router/children.js'.
  routeFilePath: 'src/router/children.js',
})