Is there a way to remove some routes with their linked ponents from production build of Vue app?

In my app I have manager interface that only I use so there is no need to have it's logic in the production build. I want to avoid having any of manager's code actually used in the production build as I can use the manager page only during development on localhost.

Here is simple example what I have now. The managerCheck tests if user is manager to allow user to enter or to redirect him back to the homepage. This is probably enough as it is also bined with check in MongoDB but I still would love to not includes manager's ponents logic inside production build as ManagerView includes pretty powerful functions and it is better to be safe than sorry.

// router.js
// ... some imports

const userCheck = (to, from, next) => store.getters['user/user'] ?  next() : next({path: '/login'})
const managerCheck = (to, from, next) => store.getters['user/manager'] ?  next() : next({path: '/'})

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'App Name',
      ponent: MainView,
    },
    {
      path: '/user',
      name: 'User',
      ponent: UserView,
      beforeEnter: userCheck
    },
    {
      path: '/manager',
      name: 'Manager',
      ponent: ManagerView,
      beforeEnter: managerCheck
    }
})

Is there a way to remove some routes with their linked ponents from production build of Vue app?

In my app I have manager interface that only I use so there is no need to have it's logic in the production build. I want to avoid having any of manager's code actually used in the production build as I can use the manager page only during development on localhost.

Here is simple example what I have now. The managerCheck tests if user is manager to allow user to enter or to redirect him back to the homepage. This is probably enough as it is also bined with check in MongoDB but I still would love to not includes manager's ponents logic inside production build as ManagerView includes pretty powerful functions and it is better to be safe than sorry.

// router.js
// ... some imports

const userCheck = (to, from, next) => store.getters['user/user'] ?  next() : next({path: '/login'})
const managerCheck = (to, from, next) => store.getters['user/manager'] ?  next() : next({path: '/'})

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'App Name',
      ponent: MainView,
    },
    {
      path: '/user',
      name: 'User',
      ponent: UserView,
      beforeEnter: userCheck
    },
    {
      path: '/manager',
      name: 'Manager',
      ponent: ManagerView,
      beforeEnter: managerCheck
    }
})

• javascript
• vue.js
• webpack
• build

• It largely depends on how you're using Vue, but chances are process.env.NODE_ENV === 'development' ? devRoutes: prodRoutes should work. Obviously, devRoutes should be a merge of prodRoutes with whatever you don't want in prod. – tao Commented Jan 19, 2020 at 22:12

2 Answers 2

In production, unnecessary routes can be filtered out.

Routes can be defined with productionAvailable flag.

routes: [
    {
      path: '/',
      name: 'App Name',
      ponent: MainView,
      productionAvailable: true,
    },
    {
      path: '/user',
      name: 'User',
      ponent: UserView,
      beforeEnter: userCheck,
      productionAvailable: true,
    },
    {
      path: '/manager',
      name: 'Manager',
      ponent: ManagerView,
      beforeEnter: managerCheck,
      productionAvailable: false,
    }
}]

Then filter it when exporting if the node env is set to production.

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: process.env.NODE_ENV === 'production' ? routes.filter((route) => route.productionAvailable) : routes,
})

I would do something like this:

// router.js
// ... some imports

const userCheck = (to, from, next) => store.getters['user/user'] ?  next() : next({path: '/login'})
const managerCheck = (to, from, next) => store.getters['user/manager'] ?  next() : next({path: '/'})

const clientRoutes = [
  {
    path: '/',
    name: 'App Name',
    ponent: MainView,
  },
  {
    path: '/user',
    name: 'User',
    ponent: UserView,
    beforeEnter: userCheck
  }
]

const managerRoutes = []

// you may have to look into process.env to set this condition correctly
if (process.env.NODE_ENV !== 'production') {
  managerRoutes.push({
    path: '/manager',
    name: 'Manager',
    ponent: ManagerView,
    beforeEnter: managerCheck
  })
}


export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [...clientRoutes, ...managerRoutes]
})

process.env: https://cli.vuejs/guide/mode-and-env.html#modes