После размещения на github не отображается контент приложения vue-cli, который должен выводиться в теге router-view. Причина?

Question

[Alex2023]

Сделал приложение vue-cli с использованием vue-router. На локальном сервере работает хорошо. Сделал publicPath, как в инструкции (publicPath: process.env.NODE_ENV === 'production' ? '/filmrock/' : '/'), закомментировал /dist в .gitignore, разместил на github, как было описано в сети, с помощью push в дополнительную ветку gh-pages, добавил к ссылке index.html (одно тестовое приложение с роутером так уже размещал, оно работает). Но тут, когда открываю свою ссылку, выводятся только header и footer, которые в файле App.vue расположены соответственно сверху и снизу от тега router-view:

<template>
  <div class="container-fluid sticky-top">
    <div class="row">
      <div class="col-md-3 col-3 p-0">
        <LogoType/>
      </div>
      <div class="col-md-2 col-6 d-flex flex-column justify-content-center" v-if="$store.state.user">
        <RegUser/>
      </div>
      <div class="col-md-7 col-3 d-inline-flex align-items-center justify-content-end">
        <NavBar/>
      </div>
    </div>
  </div>
  <router-view/>
  <MyFooter/>
</template>

В первую секунду начинает рендериться, а потом схлопывается и остаются только верхняя и нижняя полосы. При перезагрузке возникает ошибка 404.
Искал в сети решение, но описанные проблемы не похожи на мою. Помогите, пожалуйста, решить проблему. Заранее благодарен.

Comments

[Данил Бабаков]

В gh-pages Вы пушите папку dist?

Answer 1

[Александр]

https://router.vuejs.org/guide/essentials/history-...

Answer 2

[Alex2023]

Я частично разобрался. Добавил в файле App.vue в хуке mounted запись this.$router.push('/'). Сайт стал загружаться корректно.
Не знаю, Александр, это ли Вы имели в виду, но вторая часть проблемы по прежнему сохраняется: после перезагрузки страницы возникает ошибка 404.
Подскажите, пожалуйста, как это устранить?

Comments

[Александр]

Заменить History Router, на Hash Router.

Answer 3

[naweb]

Попробуйте добавить название вашего репозитория как аргумент для createWebHistory() или createWebHashHistory(), например ваш репозиторий - "repo": (index.ts/js)

export default createRouter({
  history: createWebHistory('/repo'),
  routes: [ ],
});

Также не забудьте поменять "base" если вы используете сборщик и у вас постоянно не загружаются файлы давая 404, например сборщик vite (у других может быть другой ключ): (vite.config.ts/js)

export default defineConfig({
  base: '/repo/',
  plugins: [],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})