本文最后更新于 1614 天前,其中的信息可能已经有所发展或是发生改变。
Table of Content
背景
vue-router的History模式将所有的path请求重写到index.html
文件,而这么做的目的,按vue-router的说法是
当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
而它们给出的Caddy解决方案是这样子的:
Caddy
rewrite {
regexp .*
to {path} /
}
这个方法的确可以解决path rewrite到index.html文件的问题。但是考虑到我们常常用某些path作为后端接口的prefix或者reverse proxy的prefix,这个配置就会覆盖掉其他的后端响应。
解决方案
rewrite {
if {path} not_starts_with /api
if {path} not_starts_with /socket.io
if_op and
to {path} /
}
解释一下。第一句和第二句代表如果{path}不以/api以及/socket.io开头的
(if_op and代表上面的if条件是以and二元运算符连接,即当所有if条件成立的时候),即重写到{path}文件,或者根目录缺省文件(index.html)。
这个方案比正则表达式会更加直观。