vue-router not working when running on serve

[lightzane]

Since vue-router is working in development mode, I think I had mistakenly log issue on vue-router github. Because I lately found out that I'm running it on serve (after npm run build for vue) and found out that there is a separate github repo for that.

Issue: Vue-router not working on serve dist folder.

Please see issue logged on vue-router: https://github.com/vuejs/vue-router/issues/2668 or https://github.com/vuejs/vue-router/issues/2671

Update Additional note: vue-router is working on router-link, but accessing the router in URL directly, it always shows 404. (but this works in npm run serve = not yet on dist directory) This is to add note that I also tried using this:

npm install -g serve
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist

[gustiyoga]

Serve v6.4.8 work fine on my computer

[chris-dura]

I'm experiencing a similar issue using vuepress and serve. It works fine, if I use the UI to navigate around, but trying to "deeplink" to a subpage by typing into the address bar, and it fails.

$ serve --version
11.1.0

[mara-schulke]

Can you exclude, that it is an issue with vue-router? (e.g. did you try to use a other http server for testing purposes?)

[emadshaaban92]

I had a very similar problem with react-router and just solved it by adding this line to serve.json.

"rewrites": [ { "source": "/**", "destination": "/index.html" } ]

Probably this happens because serve has no idea about client-side routes, it just serves static files. So the trick is to ask it to serve index.html for all routes and let your client-side router handle the rest

[posva]

With client side routing, no matter the framework, you need to either pass the -s param to serve to make the redirects for you or configure the redirects options like in the comment above. Ideally, you should also include a robots.txt file or be more specific about what urls are allowed based on the client side routing. This list must be generated from the list of routes and the format varies from platform to platform.

In short, this is not a problem with serve nor with vue-router

[ccarstens]

@emadshaaban92 You just helped me figuring a similar issue out when deploying to Vercel! Thank you!

[hassnian]

I had a very similar problem with react-router and just solved it by adding this line to serve.json.

"rewrites": [ { "source": "/**", "destination": "/index.html" } ]

Probably this happens because serve has no idea about client-side routes, it just serves static files. So the trick is to ask it to serve index.html for all routes and let your client-side router handle the rest

this worked for me 😀

[shashinvision]

I had a very similar problem with react-router and just solved it by adding this line to serve.json.

"rewrites": [ { "source": "/**", "destination": "/index.html" } ]

Probably this happens because serve has no idea about client-side routes, it just serves static files. So the trick is to ask it to serve index.html for all routes and let your client-side router handle the rest

Solved my problem

[mauroaccornero]

My solution was to add -s (Rewrite all not-found requests to index.html) from my package scripts, without adding a serve.json file.

This example serves the dist folder on http://localhost:9000

serve -s dist -l 9000