Удалить выбранные маршруты из производственной сборки в Vue

Question

Есть ли способ удалить некоторые маршруты со связанными компонентами из производственной сборки приложения Vue?

В моем приложении есть интерфейс диспетчера, который используется только мной, поэтому нет необходимости иметь его логи c в производственной сборке. Я хочу избежать использования какого-либо кода менеджера на самом деле в производственной сборке, поскольку я могу использовать страницу менеджера только во время разработки на localhost.

Вот простой пример того, что я имею сейчас. ManagerCheck проверяет, является ли пользователь менеджером, чтобы позволить пользователю войти или перенаправить его обратно на домашнюю страницу. Этого, вероятно, вполне достаточно, поскольку в MongoDB он также комбинируется с проверкой, но я все равно хотел бы не включать logi c компонентов менеджера в производственную сборку, так как ManagerView включает в себя довольно мощные функции, и лучше быть в безопасности, чем потом сожалеть.

// 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',
      component: MainView,
    },
    {
      path: '/user',
      name: 'User',
      component: UserView,
      beforeEnter: userCheck
    },
    {
      path: '/manager',
      name: 'Manager',
      component: ManagerView,
      beforeEnter: managerCheck
    }
})

Answer 1

Я бы сделал что-то вроде этого:

// 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',
    component: MainView,
  },
  {
    path: '/user',
    name: 'User',
    component: 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',
    component: ManagerView,
    beforeEnter: managerCheck
  })
}


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

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

Answer 2

В производстве ненужные маршруты могут быть отфильтрованы.

Маршруты могут быть определены с флагом productionAvailable.

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

Затем отфильтруйте его при экспорте, если для env узла установлено значение production.

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