vue-router is redirected to 404 page instead of the correct component

[timelights]

Version

3.0.2

Reproduction link

https://codepen.io/anon/pen/BbMByN

Steps to reproduce

1. vue create my-app (choose default)
2. npm install vue-router
3. add neccesarry code to create basic routing

What is expected?

npm run serve
-- localhost:8080/my/route/to/login
Login component is displayed

npm run build
on cli, enter "serve" to run the build under dist folder
-- localhost:5000/my/route/to/login
Login component is displayed

What is actually happening?

npm run serve
-- localhost:8080/my/route/to/login
Login component is displayed

npm run build
on cli, enter "serve" to run the build under dist folder
-- localhost:5000/my/route/to/login
404 | The requested path could not be found

---

npm install -g serve
serve --version = 10.1.2

[posva]

Put the star route at the end

[timelights]

@posva

It is still not working. Unknown component (404) is displayed instead of the Login component.
Please note that the 404 page displayed IS NOT the one I made.

I updated to: (also please see screenshot below)

export default new VueRouter({
    mode: 'history', // removes the hash tag (e.g. localhost:8080/#/)
    routes: [
        {
            path: '/',
            component: Main
        },
        {
            // this URL works fine in "npm run serve" 
            // this URL redirects to 404 | The requested path could not be found in "npm run build" 
            // Note that the 404 page displayed was not the "PageNotFound" component.
            path: '/my/route/to/login', 
            component: Login
        },
        {
            path: '*',
            component: PageNotFound
        },
    ]
})

When serving in Production (dist folder generated by npm run build)

localhost:8080/my/route/to/login = working as expected, LOGIN component is displayed
localhost:5000/my/route/to/login = foreign 404 page is displayed instead of the LOGIN component.
Please note that this is not a 404 page I created

[Cardozo17]

Getting the same error with my vue template. Did you find a solution for this?

[posva]

You need to configure your server to redirect to your index.html page with all requests: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

The original issue was closed because the reproduction was invalid