Vue-router HTML5 History 模式 Caddy配置

背景

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)。
这个方案比正则表达式会更加直观。