Vue-router HTML5 History 模式 Caddy配置
本文最后更新于 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)。
这个方案比正则表达式会更加直观。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇