Как исправить ошибку 404 при динамической генерации url?

Question

[reasonov]

Всем привет, такой вопрос, у меня есть vue приложение, оно запускается по ссылке вида "www.app/id/", id это число, которое определяется при запуске. Когда приложение запускается на сервере и подставляется этот id, то страница выдает ошибку 404, как можно с этим бороться? Скриншот ошибки приложил

Comments

[reasonov]

При этом если запускать на localhost и добавлять в путь айди, то все будет корректно работать

Answer 1

[Сергей delphinpro]

Об этом в документации отдельным разделом написано
https://v3.router.vuejs.org/ru/guide/essentials/hi...

Возникает, однако, и проблема: поскольку наше приложение — одностраничное, не сконфигурировав соответствующим образом сервер мы заставим пользователей получать ошибку 404, если они перейдут по http://oursite.com/user/id напрямую. Вот это уже прекрасным не назвать.

Не спешите расстраиваться: всё, что нужно — единственная "резервная" запись в конфигурации сервера. Если URL не совпадает ни с одним статическим файлом, сервер должен просто отдать index.html, в котором и живёт наше приложение. И снова, прекрасно!

Answer 2

[Владимир Коротенко]

А кто будет вместо вас настраивать пути?

# ловим все запросы к спа и перенаправляем на индекс, 404 обрабатываем в нем же
<Directory ~ "^/[\w+\d+-]+">
  FallbackResource /index.html
</Directory>

# отдельно обрабатываем статику
<Files ~ "\.(js|css|gif|jpe?g|png)$">
  FallbackResource disabled
  ErrorDocument 404 "File not found"
</Files>

// Imports
import Vue from 'vue'
import Router from 'vue-router'
import { authGuard, logoutHabdler } from '@/helpers'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior: (to, from, savedPosition) => {
    if (to.hash) return { selector: to.hash }
    if (savedPosition) return savedPosition

    return { x: 0, y: 0 }
  },
  routes: [
    {
      path: '/logout',
      beforeEnter: logoutHabdler,
    },
    {
      path: '/',
      component: () => import('@/layouts/home/Index.vue'),
      children: [
        {
          path: '',
          name: 'Home',
          component: () => import('@/views/home/Index.vue'),
        },

        {
          path: 'about',
          name: 'About',
          component: () => import('@/views/about/Index.vue'),
        },
        {
          path: 'description',
          name: 'Description',
          component: () => import('@/views/description/Index.vue'),
        },
        {
          path: 'price',
          name: 'Price',
          component: () => import('@/views/price/Index.vue'),
        },
        {
          path: 'login',
          name: 'Login',
          component: () => import('@/views/login/Index.vue'),
        },
        {
          path: 'legal',
          name: 'Legal',
          component: () => import('@/views/home/Legal.vue'),
        },
        {
          path: 'eula',
          name: 'Eula',
          component: () => import('@/views/home/Eula.vue'),
        },
        {
          path: 'condition',
          name: 'Condition',
          component: () => import('@/views/home/Condition.vue'),
        },
        {
          path: 'disclosure/:id?',
          name: 'Disclosure',
          component: () => import('@/views/home/Disclosure.vue'),
        },
        {
          path: 'userlist/:id?',
          name: 'UserList',
          component: () => import('@/views/home/UserList.vue'),
        },
        {
          path: 'open/:id?',
          name: 'SuccessorList',
          component: () => import('@/views/home/SuccessorList.vue'),
        },
      ],
    },
    {
      path: '/user',
      component: () => import('@/layouts/user/Index.vue'),
      beforeEnter: authGuard,
      children: [
        {
          path: '',
          name: 'UserHome',
          component: () => import('@/views/user/Index.vue'),
        },
        {
          path: 'store/:id?',
          name: 'UserStore',
          component: () => import('@/views/user/Store.vue'),
        },
        {
          path: 'faq',
          name: 'UserFaq',
          component: () => import('@/views/user/Faq.vue'),
        },
        {
          path: 'messages',
          name: 'UserMessages',
          component: () => import('@/views/user/Messages.vue'),
        },
        {
          path: 'contacts',
          name: 'UserContacts',
          component: () => import('@/views/user/Contacts.vue'),
        },
        {
          path: 'profile',
          name: 'UserProfile',
          component: () => import('@/views/user/Profile.vue'),
        },
        {
          path: 'payment/:id',
          name: 'Payment',
          component: () => import('@/views/user/Payment.vue'),
        },
      ],
    },
    {
      path: '*',
      component: () => import('@/layouts/user/Page404.vue'),
      children: [
        {
          path: '*',
          name: 'Page404',
          component: () => import('@/views/user/Page404.vue'),
        },
       ],
  },
  ],
})

export default router