Vue 3 на сервере разработки при переходе по адресу выдаёт ошибку cannot get /адрес

Имею вот такую ссылку:

  <li
    class="header-list__item" 
  >
       <a href="/roadmap">
            <div class="header-nav-link__img roadmap-header-btn"></div>
            <p class="header-nav-link__text">
                 Дорога<br>прогресса
            </p>
      </a>
  </li>

Вот router.js:

import { createRouter, createWebHistory } from 'vue-router'; 

// Компоненты
import MainLayout from '@/pages/MainLayout';

import Roadmap from '@/components/roadmap/Roadmap';
import MainPage from '@/pages/MainPage';

export default createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'main',
            component: MainLayout,
            children: [
                {
                    path: '/',
                    name: 'main',
                    component: MainPage
                },
                {
                    path: '/roadmap',
                    name: 'roadmap',
                    component: Roadmap
                }
            ]
        }
    ]
})

Вчера всё работало нормально, но когда сегодня я ничего не меняя развернул сервер с помощью:

npm run serve

То при переходе по ссылке получил белую страницу вот с такой ошибкой:

Cannot GET /roadmap

В то время как в production версии всё работает отлично:

Помогите пожалуйста!!! Не знаю что делать, повторно скажу, что вчера всё работало отлично, а сегодня я ничего не менял. А, точно, проект генерировал с помощью vue-cli