Vue项目开发模式下Nginx配置生效，生产模式下访问异常求助

嘿，各位技术大佬，我最近碰到了个Vue项目部署的头疼问题，折腾半天没捋明白，来求助啦！

先跟大伙说说我的配置和具体情况：

我的Nginx配置 #

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;
  }
}

服务器目录结构 #

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

开发模式完全正常 #

我用命令 npm run serve -- --port 8085 启动开发服务后，访问 http://lionchortle.lol/vue 就能正常打开Vue项目的首页，一点毛病没有。

生产模式就掉链子了 #

我先执行 npm run build 打包项目，再用 npx serve dist -l 8085 启动生产服务。这时候直接访问 http://lionchortle.lol:8085 能正常看到Vue项目，但访问 http://lionchortle.lol/vue 就不对了，页面显示的是一片资源加载失败的错乱内容。

我实在搞不懂为啥开发模式下Nginx的代理能正常工作，生产模式就不行了，有没有大佬能帮我找找问题出在哪呀？

备注：内容来源于stack exchange，提问作者parsecer