Ryan's WorkSpace
  • 首页
  • 关于我
  1. 首页
  2. Online Judge
  3. 正文

Vue-router HTML5 History 模式 Caddy配置

2020年06月21日 1449点热度 0人点赞 0条评论

内容纲要

背景

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

相关

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 暂无
最后更新:2020年06月21日

Ryan Lee

如果帮助到你,请点击广告,谢谢!

点赞
< 上一篇

文章评论

您需要 登录 之后才可以评论

如果帮助到你,请点击广告,谢谢!

用户您好!请先登录!
登录 注册
Social Media
Github: ryanlee2014
标签聚合
GitHub C++ Java php C hustoj Apache JavaScript
友链
Pacolyon
Lucien's blog
Slian's DreamWork
卡拉搜索
  • 0
  • 16,155
  • 5,990
  • 0
广告

COPYRIGHT © 2020 Ryan's WorkSpace. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

登录
注册|忘记密码?