使用Vue.component加载组件报错，改用import正常，原因是什么？

别担心，这个问题其实是搞混了Vue全局组件注册和ES模块导入的不同作用场景，我给你拆解清楚：

1. 为什么Vue.component注册后会报错？ #

当你执行Vue.component('dashboard', require('./components/foo/dashboard.vue').default)时，你只是把这个组件注册成了全局可用的模板标签——简单说就是你能在Vue模板里写<dashboard></dashboard>来渲染它，但这并不会在当前JavaScript作用域里创建一个叫dashboard的变量。

所以当你在路由配置里写component: dashboard时，JS引擎根本找不到这个变量，自然就抛出Uncaught ReferenceError: dashboard is not defined的错误了。

2. 为什么import方式能正常运行？ #

import dashboard from './components/foo/dashboard.vue'是标准的ES模块导入语法，它会把.vue文件导出的组件对象直接赋值给当前作用域下的dashboard变量。这个变量是实实在在存在的，所以路由配置里的component: dashboard能正确引用到组件对象。

给你两个可行的修正方案 #

如果你想用Vue.component注册的组件配合路由使用，可以这么做：

• 方案一：把Vue.component的返回值赋值给变量
  Vue.component注册组件后会返回该组件对象，所以可以直接把它存到变量里：

  const dashboard = Vue.component('dashboard', require('./components/foo/dashboard.vue').default);
  const members = Vue.component('members', require('./components/foo/members.vue').default);
  
  const routes = [
    { path: '/dashboard', component: dashboard },
    { path: '/members', component: members }
  ];
  

• 方案二：路由里直接引入组件（无需全局注册）
  如果不需要在模板里全局使用这些组件，完全可以跳过Vue.component注册，直接在路由里引入：

  const routes = [
    { path: '/dashboard', component: require('./components/foo/dashboard.vue').default },
    { path: '/members', component: require('./components/foo/members.vue').default }
  ];
  

内容的提问来源于stack exchange，提问作者DevonDahon