vue contextPath的思考

news2025/1/15 23:41:31

先说我这边的情况,目前项目都是前后端分离开发的,上线有种部署方式,常见的就是前后端分开部署,这是比较常见的,我这边因客户原因,打包一起进行部署比较简单,交付技术运维部方便后期其他现场部署,由于场景不同,没有使用分布式,更别谈微服务,只是单体,因为大部门客户企业也就是几十个人,也有几万用户,但是真正使用的也就是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 就可以了,这样处理不仅仅兼容了其他现场,也能支持后期定制化,减少不一致问题

        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1691092.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DHT11获取数据传输到PC端

1.DHT11的时序数据 a : dht 1 b :dht 0延时30ms c: dht 1 卡d点;while(dht1); 卡e点 while(!dht) 卡f点:while(dht) 卡g点:while(!dht) 有效数据都是高电平,持续时间不一样,50us读&#…

首发!飞凌嵌入式FETMX6ULL-S核心板已适配OpenHarmony 4.1

近日,飞凌嵌入式在FETMX6ULL-S核心板上率先适配了OpenHarmony 4.1,这也是业内的首个应用案例,嵌入式核心板与OpenHarmony操作系统的结合与应用,将进一步推动千行百业的数智化进程。 飞凌嵌入式FETMX6ULL-S核心板基于NXP i.MX 6ULL…

水电集中抄表是什么?

1.定义分析:水电集中抄表 水电集中抄表是一种现代化能源管理体系方法,它利用先进的信息科技,如物联网技术、云计算等,完成对水电表数据的远程智能采集与处理。这种方法改变了传统的人工上门服务抄表方式,提高了效率&a…

为什么 buffer 越大传输效率越低

先看 从边际效益递减看 buffer 中挤占带宽 中的两个模型: E1 inflight_prop - inflight_buff: y 2 t x − b x a − x y2tx-\dfrac{bx}{a-x} y2tx−a−xbx​E2 bw / delay: y a x − x 2 b t a − t x y\dfrac{ax-x^2}{bta-tx} ybta−…

光环P3O不错的一个讲座

光环P3O不错的一个讲座,地址:https://apphfuydjku5721.h5.xiaoeknow.com/v2/course/alive/l_663dc840e4b0694c62c32d1d?app_idapphfuydJkU5721&share_fromu_5c987304d8515_wH2E5HgCgx&share_type5&share_user_idu_5c987304d8515_wH2E5HgCgx…

STL--set和multiset集合

set和multiset会根据特定的排序准则&#xff0c;自动将元素排序。两者不同之处在于multiset 允许元素重复而 set 不允许。如下图: 使用set或multiset&#xff0c;必须先包含头文件: #include <set>上述两个类型都被定义为命名空间std内的class template: namespace std…

Platformer Project

Platformer项目适合那些寻找坚实基础来构建你梦想中的3D平台游戏的人,提供受该类型最具影响力游戏启发的核心机制。 一般功能 移动支持; 自定义运动学角色控制器; Humanoid Rig支持(共享动画); 保存/加载(二进制、JSON或Playerprefs); 支持多个存储槽; 三星、硬币和最…

React-JSX基础

什么是JSX 概念&#xff1a;JSX是JavaScript和XML&#xff08;HTML&#xff09;的缩写&#xff0c;表示在JS代码中编写HTML模板结构&#xff0c;它是React中编写UI模板的方式 优势&#xff1a;1.HTML的声明式模板写法 2.JS的可编程能力 JSX的本质 JSX并不是标准的JS语法&…

高集成IP摄像SOC处理方案简介以及芯片介绍SSC336D

时至今日&#xff0c;随着科技越来越快的发展&#xff0c;视频监控领域目前已经向新型 IP 网络进行技术过渡。而 IP 网络摄像系统的初始定义为&#xff1a;网络与视频处理技术相统一的摄像单元。 网络摄像系统拥有自己的 IP 地址和计算功能&#xff0c;能处理网络通信任务。其…

Qt下使用QImage和OpenCV实现图像的拼接与融合

文章目录 前言一、使用QImage进行水平拼接二、使用OpenCV进行水平拼接三、使用OpenCV进行图像融合四、示例完整代码总结 前言 本文主要讲述了在Qt下使用QImage和OpenCV实现图像的拼接与融合&#xff0c;并结合相应的示例进行讲解&#xff0c;以便大家学习&#xff0c;如有错误…

Linux基础(二):环境搭建

本文准备从0开始&#xff0c;一步步搭建一套属于自己的Linux系统环境&#xff0c;这将是后续学Linux、用Linux、Linux环境编程、应用和项目部署、工具实验等一系列学习和实践的基石&#xff0c;希望对小伙伴们有帮助。提前备好Linux编程实验环境非常重要&#xff0c;建议人手一…

【小笔记】如何在docker中更新或导入neo4j数据?

如何在docker中更新或导入neo4j数据&#xff1f; &#xff08;1&#xff09;背景&#xff1a; 我尝试了4.4.9和5.19.0版本的Neo4j社区版&#xff0c;基于他们的镜像创建容器后&#xff0c;需要导入我准备好的csv文件或dump文件&#xff0c;因为数据量非常大&#xff0c;所以采…

IntelliJ IDEA集成Baidu Comate,商城系统支付交易功能开发实战

文章目录 Baidu Comate介绍安装配置体验安装插件配置体验注释生成代码技术问答 实战设计表生成代码导入数据 总结 Baidu Comate介绍 在科技互联网飞速发展的今天&#xff0c;百度凭借其深厚的技术积累和创新能力&#xff0c;推出了一款名为Baidu Comate智能代码助手的产品。该…

JS-03深入了解构造函数

目录 1 引入构造函数 2 通过构造函数创建对象-内置 3 自定义一个构造函数来创建对象 3.1 构造函数的概念 3.2关于new Object() 3.3 构造函数的执行过程 3.3.1构造函数的返回值 3.3.2 如何判断一个数据是否是复杂数据类型&#xff1f; 3.3.3为什么要理解构造函数的返回值&…

15、24年--信息系统管理——管理要点

1、数据管理 数据管理使指通过规划、控制与提供数据和信息资产的职能,包括开发、执行和监督有关数据的计划、策略、方案、项目、流程、方法和程序,以获取、控制、保护、交付和提高数据和信息资产价值。 DCMM定义了数据战略、数据治理、数据架构、数据应用、数据安全、…

如何官方查询论文分区,中科院及JCR

中科院分区 有一个小程序&#xff1a;中科院文献情报中心分区表 点2023升级版&#xff0c;输入期刊名 大类1区 JCR分区 进入官方网站 Journal Citation Reports 输入要查询的期刊名&#xff0c;点开 拼命往下拉 这就是根据影响因子的排名&#xff0c;在computer science&am…

柱状图中最大的矩形 - LeetCode 热题 73

大家好&#xff01;我是曾续缘&#x1f61b; 今天是《LeetCode 热题 100》系列 发车第 73 天 栈第 5 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xf…

使用docker-compose部署时序数据库InfluxDB1.8.4

背景 如今 InfluxDB 已经更新到了 2.x &#xff0c; InfluxDB 1.x 和 2.x 版本之间有几个主要的区别&#xff1a; 数据模型&#xff1a; 1.x&#xff1a;使用数据库和保留策略来组织数据。 2.x&#xff1a;引入了组织&#xff08;organizations&#xff09;和存储桶&#xff…

抖音极速版:抖音轻量精简版本,新人享大福利

和快手一样&#xff0c;抖音也有自己的极速版&#xff0c;可视作抖音的轻量精简版&#xff0c;更专注于刷视频看广告赚钱&#xff0c;收益比抖音要高&#xff0c;可玩性更佳。 抖音极速版简介 抖音极速版是一个提供短视频创业和收益任务的平台&#xff0c;用户可以通过观看广…