从 Vue 的生产构建中删除选定的路由答案

【问题标题】：Remove selected routes from production build in Vue从 Vue 的生产构建中删除选定的路由
【发布时间】：2020-01-19 20:48:17
【问题描述】：

有没有办法从 Vue 应用程序的生产版本中删除一些带有链接组件的路由？

在我的应用程序中，我有只有我使用的管理器界面，因此不需要在生产构建中使用它的逻辑。我想避免在生产构建中实际使用任何经理的代码，因为我只能在本地主机上的开发期间使用经理页面。

这是我现在拥有的简单示例。 managerCheck 测试用户是否是管理员以允许用户进入或将他重定向回主页。这可能就足够了，因为它还与 MongoDB 中的检查相结合，但我仍然希望不在生产构建中包含管理器的组件逻辑，因为 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
    }
})

【问题讨论】：

这在很大程度上取决于你如何使用 Vue，但process.env.NODE_ENV === 'development' ? devRoutes: prodRoutes 应该可以工作。显然，devRoutes 应该是 prodRoutes 与产品中您不想要的任何东西的合并。

标签： javascript vue.js webpack build

【解决方案1】：

在生产中，可以过滤掉不必要的路由。

可以使用 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,
    }
}]

如果node 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,
})

【讨论】：

也是一个很棒且简单的解决方案，感谢您的宝贵时间。

【解决方案2】：

我会这样做：

// 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

【讨论】：

谢谢。不知道为什么我没有想到这一点，这是一个非常简单的解决方案。