VueJS router history mode with Traefik - traefik

Question

I need to do rewrite a URL of my application like this: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
I'm using Traefik as a reverse proxy and Docker Compose.
Here is my raw configuration in Docker:
application:
build: ./domain.app
volumes:
- ./domain.app/dist:/app
networks:
- net
labels:
- "traefik.frontend.rule=Host:domain.me"
- "traefik.port=8081"
- "traefik.backend=domain.me"
- "traefik.frontend.entryPoints=http,https"
With that configuration:
https://domain.me is working
https://domain.me/anything returns 404
How can I fix this rewrite rule?

Answer 1

For vue.js router history mode you want to catch all Routes that do not point to a resource on the server and forward them to your index.html. For Example:
https://example.com --> /index.html
https://example.com/route/to/subsite --> /index.html
But you still want to be able to access resources that are on the server. E.g.:
https://example.com/path/to/kitten.jpg --> /path/to/kitten.jpg not /index.html
In order to do that you have to find a Backend Server supporting Catch-All Fallback. You can use the ones noted in the vue.js Guide (Apache, Nginx, Node, IIS)
Why can't I use traefik for this?
As stated above you still want to be able to serve static resources. But traefik is just a router. It does only has access to the information of the request, not to the information of the server. But in order to decide if to serve the index.html or the static resource you must have access to the resources.
You could route all the traffic to the index.html using Traefik's PathPrefixStripRegex:but this would result in serving index.html for every request, even if you would have wanted kitten.jpg.