如何根据vueJs上的路由中的环境if子句更改组件源？

// 路由配置文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      environment: 'development' // 设置元信息为开发环境
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      environment: 'production' // 设置元信息为生产环境
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

// 组件中的导航守卫
import router from './router'

router.beforeEach((to, from, next) => {
  const environment = to.meta.environment
  if (environment === 'development') {
    // 根据开发环境更改组件源
    import('./components/DevelopmentComponent.vue').then(component => {
      // 使用动态组件
      to.component = component.default
      next()
    })
  } else if (environment === 'production') {
    // 根据生产环境更改组件源
    import('./components/ProductionComponent.vue').then(component => {
      // 使用动态组件
      to.component = component.default
      next()
    })
  } else {
    next()
  }
})