[DevOps] 子路径访问,解决404(history-模式,base使用)

83 阅读1分钟

场景

以下域名均为虚拟域名

  1. 公司的一个内部项目,使用了 Material Design 做了重构,需要替换现在的线上版本(legacy.com)
  2. Material Design 版本采用新域名为: material-design.com
  3. 因为时间比较仓促,老版本(legacy.com)一些功能,还没有完全集成到新版本上,因此老版本仍然需要发挥余热。因此 和老大讨论之后,新版本和老版本的上线方案如下:

  1. 新旧版本全部采用 HTTPS 协议
  2. 新版本的域名为:material-design.com
  3. 保留老版本的功能,老版本的域名由 legacy.com 更新为 material-design.com/legacy/
  4. 用户访问老版本 legacy.com,前端跳转至新版本 document.locatio=https://material-design.com/legacy/。不采用后端 Nginx 重定向的原因会在其它中补充说明。

其它

  1. 不采用后端 Nginx 重定向的原因

Solution

  1. nginx
  location ^~ /legacy {
	    alias /data/proj/legacy-frontend/;
	    #try_files $uri $uri/ /index.html;
	    try_files $uri $uri/ /legacy/;
	  }
  1. vue router
var router = new Router({
   mode: 'history',
   base: '/legacy/',
});