背景
Angular 的单页应用中因为有用到锚点,所以只能用 browser router。假设目标地址为 app.com/target1。
问题
在访问 app.com/target1 时,路由跳转到 app.com/target1/target2, 刷新页面后 404。
相关配置如下:
server {
listen 4300;
server_name business;
location / {
try_files $uri $uri/ /index.html;
root tempPath/dist/;
}
}
server {
listen 80;
server_name entry;
root tempPath/;
location ^~ /business {
proxy_pass http://localhost:4300;
}
}
尝试的解决方法
-
关键字搜了 browser router with nginx
,看到的都是用 try_files $uri $uri/ /index.html
。我试着把最后一个参数改成 app.com/target1
所在的物理路径,也就是 tempPath/dist/
,错误日志会说:rewrite大带宽服务器 or internal redirection cycle while internally redirecting to "/index.html" 。后来想想,逻辑上确实是循环,此路不通。
-
从页面物理层面解决。就是每个路由都写个 html,但这真的很麻烦...
希望获得帮助的点
希望能在 1 的方向上给点建议。看上去只要在匹配到 /business 时停下来,直接转发到 html 入口就能解决了...
直接在 80 端口下面 try_files 不行么,为啥还要再转一下?
80 端口得监听很多像这样的 app,有 app.com/target1,有 app.com/target2,我希望能写得更清晰一点就转了。实际上直接在 80 try_files 报的错跟正文里的写法报的错是一样的。
我一般是这样写的,参考一下:
```
location /app/web/ {
alias /app/web/;
index index.html index.htm;
add_header Cache-Control no-cache;
gzip_static on;
try_files $uri /app/web/index.html;
}
```
约定一种 url 模式,访问这种模式的 url 都 fallback 到 html 入口文件,location 跟 router 的 basename 对应起来
最后,如果你的 js,css 什么的跟 html 在同一个 location 里,记得上面约定的 url 模式不要跟访问 js/css 的 url 模式冲突
是说 nginx 一层路由,入口 html 一层转发,app 一层路由,这样吗?好吧,如果是这样,那在只改 nginx 层面上估计是没办法了。
感谢回复。
呃,没别的嘲讽的意思,你的回答的确是能绕开 nginx 的路由匹配。我原先的表达也有问题,我本来是以为只改 nginx 的配置就能实现这类路由的,只是我没翻到文档...
我说的就是 nginx 啊,当然,不能光改 nginx,还需要用配合的 webpack publicPath,和 browserRouter 的 baseName
nginx 配置如下
```
location map 应该要以 /结尾
location /your/desired/path/ {
alias $your_web_dir_root;
without a dot
location ~ ^[^.]*$ {
try_files your_html_file.html =404;
}
}
```