Caddy with Vue router

[nesclassdev]

1. Caddy version (caddy version):

v2.3.0 h1:fnrqJLa3G5vfxcxmOH/+kJOcunPLhSBnjgIvjXV/QTA=

2. How I run Caddy:

a. System environment:

OS : Ubuntu 20.04.2 LTS (64 Bit)
Virt/Kernel : KVM / 5.4.0-29-generic

b. Command:

caddy run --watch

c. My complete Caddyfile or JSON config:

:80

encode gzip zstd

root * /root/frontend/dist
file_server
try_files {path}.html {path} /

route /backend/* {
        uri strip_prefix /backend
        reverse_proxy localhost:3000
}

3. The problem I’m having:

Current config doesn’t work properly with vue-router, can obtain only page on /

vue-router works in history mode:

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

4. What I already tried:

Google returns non-working or outdated solutions, can’t find anything helpful in documentation

[francislavoie]

@nesclassdev

try_files {path}.html {path} /

I think you want /index.html at the end, not /. I don’t think the file matcher (which is under the hood of the try_files directive) will do the fallback to the index.html, that’s typically file_server’s job (which happens after try_files.

Also, since you’re using try_files, you’ll want to wrap your two concerns with handle blocks for it to behave properly. Caddy sorts directives according to this predetermined directive order, so try_files happens before route, meaning that the URL will be rewritten by try_files before it reaches your reverse_proxy. This would work better:

:80 {
	encode gzip zstd

	handle_path /backend/* {
		reverse_proxy localhost:3000
	}

	handle {
		root * /root/frontend/dist
		try_files {path}.html {path} /index.html
		file_server
	}
}

[nesclassdev]

Still doesn’t work. Returns layout with empty page.

[francislavoie]

Then at this point your problem is probably with your vue setup, which I can’t really help you with.

I don’t have enough information here to help further, there’s no evidence of a problem with Caddy.