Vue: nginx setting works in development mode, fails in production mode

Question

I have a nginx configuration like this:

server  {
  server_name lionchortle.lol;

  location ~ ^/vue  {
    proxy_pass http://localhost:8085;
  }


  location ~ ^/vue/  {
    proxy_pass http://localhost:8085;
  }

  location ~ ^/page  {
    root  /lionchortle;
    try_files $uri.html $uri =404;
    index index.html;
  }


}
...

I have the following directory hierarchy:

/
  lionchortle
    page.html
    vue
      src
      package.json
      node_modules
      ...

When I deploy Vue project in development mode:

npm run serve -- --port 8085

going to http://lionchortle.lol/vue shows the starting page of the Vue app.

However when I try to deploy in production mode:

npm run build
npx serve dist -l 8085

I can only see the Vue project by going to http://lionchortle.lol:8085. Going to http://lionchortle.lol/vue shows the page like this:

404 the requested path could not be found.

Going to http://lionchortle.lol/page always works (shows the page.html).

Why does switching to production mode makes the nginx configuration break?