@evila/vue-auto-routes

A hack way to auto generate vue routes

Stats

StarsIssuesVersionUpdatedCreatedSize
@evila/vue-auto-routes
440.2.03 years ago3 years agoMinified + gzip package size for @evila/vue-auto-routes in KB

Readme

vue-auto-routes

A hack way to auto generate vue routes.

Notice ️⚡️

Install

npm install --save @evila/vue-auto-routes

Usage

// example directory
|- src/
|--- pages/
    |--- foo/
    |   |- index.vue
    |--- _id.vue // dynamicRoute, same with folder
    |--- index.vue
|- webpack.config.js

// webpack.config.js
const VueAutoRoutes = require('@evila/vue-auto-routes/lib/plugin')

module.exports = {
  plugins: [
    new VueAutoRoutes({
      pages: require('path').resolve(__dirname, './src/pages')
    })
  ]
}

// router.js
import routes from '@evila/vue-auto-routes'

export default new Router({ routes })

console.log(routes) // Check about it!

Params

new VueAutoRoutes([options<object>])

options

pages

  • Type: String
  • Required: true

Pages directory, recommand to use path module

ignore

  • Type: Array<String>
  • Default: []

Ignore some directory you don't wanna include into routes under pages directory

e.g. ['**/src/components']

extensions

  • Type: Array<String>
  • Default: ['vue']

All .vue files will auto join vue-routes under pages directory (same with ['vue', 'js'])

importPrefix

  • Type: String
  • Default: '@/pages'

Depend on config.resolve.alias['@']

import component from '@/pages/component.vue'

dynamicImport

  • Type: Boolean
  • Default: false

If set true, please make sure is using babel and babel-plugin-syntax-dynamic-import in project

const component = () => import('@/pages/component.vue')

webpackChunkName

  • Type: String
  • Default: ''

Make sure already set dynamicImport is true

{ webpackChunkName: 'myRoutes' }

const component = () => import(/* webpackChunkName: 'myRoutes' */ '@/pages/component.vue')

env

  • Type: String
  • Default: 'NODE_ENV'

This is an un-friendly option.

Work well in development mode

But when you build to production version still need you set a filed is production in command line.

# example scripts command
cross-env NODE_ENV=production webpack --config webpack.config.js

Will get NODE_ENV value

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.