Serve: vue-router not working when running on serve

Created on 24 Mar 2019 · 5Comments · Source: vercel/serve

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

Source

lightzane

👍2

Most helpful comment

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

posva on 28 May 2020

❤3

All 5 comments

Serve v6.4.8 work fine on my computer

gustiyoga on 29 May 2019

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

chris-dura on 15 Aug 2019

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?)

schulke-214 on 21 Sep 2019

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