vue contextPath的思考

先说我这边的情况,目前项目都是前后端分离开发的,上线有种部署方式,常见的就是前后端分开部署,这是比较常见的,我这边因客户原因,打包一起进行部署比较简单,交付技术运维部方便后期其他现场部署,由于场景不同,没有使用分布式,更别谈微服务,只是单体,因为大部门客户企业也就是几十个人,也有几万用户,但是真正使用的也就是100多号人,所以用不到微服务和分布式,不过对于分布式方式也进行预留扩展机制,上面的背景说好了,说下问题;采用集成前后端集成部署好处时简单方便,维护量也很少,直接启动下exe即可,这个场景确实在大部客户那边都没问题的,目前遇到了一个比较正轨的大公司,内部网络错综复杂,还有划分了各个网络,例如生产网、办公网、DM区,等等,就是很多网络环境;目前客户要求不仅仅要在生产网能够访问,还要支持其他几个网络访问,例如办公网、互联网、信息网等等,在使用nginx做代理时发现了一个问题,vue打包时,静态资源默认static和其他方式,这个vue模式不是hash模式,也就是没#,类似这样的模式http://host+port/#/xx;由于我这边是多个业务系统组合而来的,那么代理的时候不可能都统一走 / 根请求访问,需要根据不同的contextPath进行调用不同的静态资源,问题出来了,例如我有个A系统,contextPath路径是/a, nginx里配置location /a 代理到A系统即可,一切一切看似都没问题,这样操作后发现问题了,后端的服务地址都是通过/a正常转到A系统了,但是前端静态资源没有走/a;

例如:

代理后正常这样的:

后端 http://host+port/a/api/xxx,

前端 http://host+port/a/static/xxx

问题是前端变成了http://host+port/static/xxx 这样,直接打到nginx根路径/上了,那这样一定有问题的。

怎么解决呢?

方法有很多种:

1、因为静态资源是放在后端服务器的资源里的,可以在springboot里的contextPath统一添加路径例如/a,这样是可以的。(我这边没有采用这种方案,想和其他现场尽可能的保持统一,方便后期运维)

2、前端能否进行统一调整,也不会影响其他现场,这样就可以保持统一了,按照这个思路我就了解了下vue的打包过程,确实是支持的。

在assetsDir里可以进行设置,例如设置成 commonFront/static,这样就可以了,或者为了代理方便可以直接设置a/static都是可以的,我这边为了方便其他现场统一,所以进行了统一设置。设置好后,那边请求前端的路径就变成了这样:http://host+port/commonFront/static/xxx

这样就好办了,在nginx在加一层location即可,location /commonFront 就可以了,这样处理不仅仅兼容了其他现场,也能支持后期定制化,减少不一致问题

相关推荐
神奇的程序员3 小时前
开发了一个管理本地开发环境的软件
前端·flutter
天若有情6733 小时前
程序员原创|借鉴JS事件冒泡,根治电脑文件混乱的“冒泡整理法”
开发语言·javascript·windows·ecmascript·电脑·办公·日常
XiYang-DING3 小时前
HTML 核心标签
前端·html
Csvn3 小时前
技术选型方法论
前端
Csvn4 小时前
前端架构演进:从页面到平台的十年变革
前端
李伟_Li慢慢4 小时前
ShaderToy-山峦+蓝天+白云
前端·webgl
小码哥_常4 小时前
Android字体字重设置全攻略:XML黑科技+Kotlin动态实现,告别.ttf臃肿
前端
FYKJ_20104 小时前
springboot校园兼职平台--附源码02041
java·javascript·spring boot·python·eclipse·django·php
言萧凡_CookieBoty5 小时前
AI 编程省 Token 实战:从 Spec、上下文工程到模型分层的降本策略
前端·ai编程
DFT计算杂谈6 小时前
wannier90 参数详解大全
java·前端·css·html·css3