为何在vue-router的routes.js中用require引入组件会报错？

这个问题我之前也碰到过，核心原因是ES模块和CommonJS模块的导出/导入规则差异，咱们结合你的代码来拆解：

先看你原来的正确写法： #

// routes.js
import Register from './components/Register'
import Login from './components/Login'
module.exports = [
  { path: `/`, component: Login },
  { path: `/register`, component: Register }
]

这里用import语句导入.vue组件时，ES模块规范会自动帮你取到组件的默认导出对象（也就是Vue单文件组件里定义的那个组件选项），所以直接赋值给component是没问题的。

再看你改写后的错误写法： #

// routes.js
module.exports = [
  { path: `/`, component: require('./components/Login') },
  { path: `/register`, component: require('./components/Register') }
]

当你用require()（CommonJS语法）导入ES模块格式的.vue文件时，返回的结果是一个包含default属性的对象——因为Vue单文件组件默认是用ES模块导出的，转成CommonJS后，默认导出会被放到default字段里。而Vue-Router的component属性需要的是直接的组件选项对象，不是这个包裹的对象，所以就会出现"template or render function not defined"的报错（相当于你给了一个不符合要求的结构，Vue找不到渲染所需的模板或函数）。

解决办法有这几种： #

• 最直接的修复：手动取default属性

  module.exports = [
    { path: `/`, component: require('./components/Login').default },
    { path: `/register`, component: require('./components/Register').default }
  ]
  

• 推荐写法：回到顶部用import导入组件，不仅代码更清晰，还能支持Tree Shaking优化
• 如果是webpack/babel配置问题：可以调整babel的模块转换配置，让CommonJS导入自动识别ES模块的默认导出，但这种方式不如前两种直接。

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