Блог

Я хочу обслуживать 2 встроенных приложения Vue.js , оба на подпути, как domain.com/apps/tennis / и domain.com/apps/football /

Оба приложения обслуживаются за Traefik с такими правилами, как:

 Host(`domain.com`) amp;amp; PathPrefix(`/tennis/`) --> Frontend tennis application

Host(`domain.com`) amp;amp; PathPrefix(`/football/`) --> Frontend football application
  

Я использую vue-router и имею настройки, подобные для обоих приложений, в их соответствующих router.js:

 const router =  new Router({
  mode: 'history',
  base: '/apps/tennis',
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: "/home",
      name: "home",
      component: () => import("./views/Home"), // show tennis application home page
    }]
});

const router =  new Router({
  mode: 'history',
  base: '/apps/football',
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: "/home",
      name: "home",
      component: () => import("./views/Home"), // show football application home page
    }]
});

  

Оба приложения имеют vue.config.js:

 module.exports = {
  publicPath: '/tennis/'
};

module.exports = {
  publicPath: '/football/'
};
  

Оба приложения не загружаются в браузере, и я вижу следующую ошибку:

 Uncaught SyntaxError: Unexpected token '<'
  

Кто-нибудь может помочь настроить два разных приложения на уровне подпутей в Vue.js ? Я предполагаю, что я сталкиваюсь с базовыми и общедоступными путями.