nginx改写路由的一个小思路

最新推荐文章于 2024-03-19 00:25:27 发布

原创最新推荐文章于 2024-03-19 00:25:27 发布 · 492 阅读

0 ·

CC 4.0 BY-SA版权

nginx重写专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何通过Nginx的重写规则结合FastAdmin来识别不同地区的页面，以及在Vue项目中利用window.location.pathname获取地区信息。同时，针对Vue项目采用history模式，配置了Nginx的try_files指令以实现无#访问，并确保不同地区页面的正确路由。

环境:

fastadmin(tp5) + nginx

问题简介:

域名: www.abc.com
介绍: 这是一个地区分类信息的站点,每一个地区的内容不互通,a地区只显示a地区的内容,b地区只显示b地区的内容.
问题: 如何通过域名来识别是不同的地区? (信息系统,不同地区的页面是相同的,只是信息不同,希望通过域名来识别.)
示例:
www.abc.com/a/1.html 显示 a 地区的信息
www.abc.com/b/1.html 显示 b 地区的信息
www.abc.com/c/1.html 显示 c 地区的信息

解决思路:

我们想要的是将 www.abc.com/a/1.html 中的 /a 转为 www.abc.com/1.html?city=a 以此作为参数识别.
那么利用 Nginx的重写,就可以达到目的,如下

location /shanghai {
		rewrite  /shanghai(.*)  /$1?city=shanghai  last;   break;
}

location /beijing {
		rewrite  /beijing(.*)  /$1?city=beijing  last;   break;
}

链接演示

如上, 如果我们打开
打开链接: http://www.abc.com/shanghai/test?a=1&b=2
实际链接: http://www.abc.com/test?a=1&b=2&city=shanghai

总结

利用 nginx 的路由改写功能加上tp5自身的路由来实现这个功能.

vue项目打包来实现不同的文件夹访问不同的地区

利用 uniapp 来编写项目,然后打包的时候,选择好目录,例如 /beijing/, 在项目中,可以利用 window.location.pathname 来获取到, 例如 /beijing/ 或 /beijing. 以此来作为参数来判断不同的地区.

打包上线的时候, nginx 中也要做相应的设置, 因为我们为了去掉 # 号, 而选择了 history 模式,所以需要设置 nginx的伪静态,如下

location /shanghai {
  try_files $uri $uri/ /shanghai/index.html;
}

location /beijing {
  try_files $uri $uri/ /beijing/index.html;
}