1 情况描述

在vue打包之后，形成dist文件，采用caddy作为静态资源服务器。在浏览器中输入域名时可以访问网站，但是，进过路由导航栏内部的跳转之后，想要在浏览器中刷新资源，发现浏览器出现404。

2 原因

这个主要是vue的历史记录模式导致的。

由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。

这是因为单页的客户端应用中，所有资源请求都是通过打包后的index.html作为入口进行处理的。这时如果只是通过配置的根目录进行访问，那肯定找不到。

这时应该将没有找到的路由全部指向index.html中。

3 配置

handle 的使用，可以有效的隔离不同的请求，防止后端的请求被错误的判断为前端的请求。

example.com {handle /api/* {reverse proxy localhost:9911}handle {root * /home/www/distencode zstd gzipfile_servertry_files {path} /}
}

https://router.vuejs.org/zh/guide/essentials/history-mode.html#Caddy-v2