Vue.js 将组件导入Vue路由器不工作

我有一个Vue应用程序（v2.5），我正在将其转换为带有Vue路由器的SPA。我希望将路由模板组织到单独的文件中，并将它们导入到我的index.js中供路由器使用。问题是我收到一条错误消息：

[Vue warn]: Failed to mount component: template or render function not defined.

found in
---> <Anonymous>
       <Root> vue.common.js:593

---

提前感谢您的帮助。

module.exports=Home；这就是复制/粘贴而不思考自己在做什么的结果。非常感激。好奇的是，我甚至需要将它声明为模板吗？Router Docs示例显示，似乎只需一个模板文本就足够了。

// src/router/index.js
const Vue = require("vue");
const VueRouter = require("vue-router");
const home = require("../js/components/homeComponent");

    const routes = [
      {
        path: "/",
        name: "Home",
        component: home,
      },
    ];
    
    const router = new VueRouter({
      mode: "history",
      // eslint-disable-next-line no-undef
      base: process.env.BASE_URL,
      routes,
    });
    
    module.exports = router;


// src/components/homeComponent.js
const Vue = require("vue");

const Home = Vue.component("home", {
  template: `
    <div class="container">
      
      <h1 class="text-center inset-shadow">Scores From Around The Leagues</h1>
      <div id="sportsImages" class="title-images d-inline-flex justify-content-around fixed-top">
        <img src="./src/img/mlb-sm.jpg" alt="Pitcher Throwing Ball" />
        <img src="./src/img/nfl-sm.jpg" alt="David Tyree Superbowl Catch" />
        <img src="./src/img/nba-sm.jpg" alt="Michael Jordan Dunking" />
      </div>

      <hr class="my-2" />
            
    </div> <!-- End .container -->
   `,
});

module.exports = {
  Home
};

Object { Home: VueComponent(options)