Блог

У меня есть приложение Vue (версия v2.5), которое я нахожусь в процессе преобразования в SPA с маршрутизатором vue. Я хочу организовать свои шаблоны для маршрутов в отдельные файлы и импортировать их в свой index.js для использования маршрутизатором. Проблема в том, что я получаю сообщение об ошибке:

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

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

Когда я включаю шаблон в index.js с файлом все в порядке. Приложение построено с помощью Browserify, поэтому я импортирую w / require вместо импорта es6.
Файлы:

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

Я вошел в консоль home в index.js и увидеть:

 Object { Home: VueComponent(options)
 

Заранее спасибо за любую помощь.