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 就可以了,这样处理不仅仅兼容了其他现场,也能支持后期定制化,减少不一致问题

相关推荐
沙蒿同学4 小时前
不引 Ghostscript:我用纯 Go 给 PDF 做了一场「压缩手术」
前端·后端·github
Linux_cy4 小时前
服务器管理工具哪个好用?我用了七八个
运维·服务器·javascript·python·ssh·面板·gmssh
变与不变8065 小时前
jQuery细节以及使用应用场景
前端·javascript·jquery
SailingCoder6 小时前
【封闭结束1】端到端交付:Agent 一次请求如何走完全链路
前端·安全·ai·面试·agent·harness
风骏时光牛马8 小时前
AI多模块协同自动化工作流
前端
zhangminghuan9 小时前
前端面试应对技巧
前端·面试·职场和发展
计算机魔术师9 小时前
潜伏14年的PHP致命洞,AI跑两天就交卷了
前端
IT_陈寒9 小时前
Vue的这个响应式陷阱我居然现在才发现
前端·人工智能·后端
Python自动化直播10 小时前
智能脚本批量管理拆开看:导入、导出、重写、试听
前端·python·ai·秒播