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

        

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

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

相关文章

qt c++ can通信实现的上位机界面,附源码

qt c can通信实现的上位机界面,附源码

docker ps显示的参数具体是什么意思

1,运行一个容器 docker run -d ubuntu:15.10 /bin/sh -c "while true; do echo hello world; sleep 1; done"这段命令的作用是使用 docker run 命令运行一个基于 ubuntu:15.10 镜像的 Docker 容器,并在容器中执行一个无限循环的命令。 具体解…

10Django项目--用户管理系统--改

对应视频链接点击直达 10Django项目--用户管理系统--改 对应视频链接点击直达改a,本质b,修改(更新) 页面相关a,index页面新增操作按钮b,修改(更新)页面c,路由和函数 OVER,不会有人不会吧不会的加Q139400651…

viewer.js 在layui中使用,并且实现表格中点击预览,点击图片名称定位到表格中某一条数据并高亮显示

下载viewer.js到本地&#xff0c;并在页面中引入 下载地址: https://www.dowebok.com/demo/192/ 页面引入js和css <link rel"stylesheet" href"/plugins/viewer/viewer.min.css" th:href"{/plugins/viewer/viewer.min.css}"> <scri…

基于jeecgboot-vue3的Flowable流程-我的任务(一)

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、首先可以用现成生成代码的前端来做这个&#xff0c;只要做一些调整就可以了&#xff0c;这样利用现有的一些模板可以快速构建我的任务&#xff0c;否则vue2与vue3相差太大&#xff0c;移…

【设计模式】生成器

来源&#xff1a;爱编程的大丙 复杂的问题化繁为简&#xff0c;逐个击破。也就是分步骤创建复杂的对象&#xff0c;并允许使用相同代码生成不同类型和形式的对象&#xff0c;这种模式叫做生成器模式&#xff08;也叫建造者模式&#xff09;。 生成器模式建议将造船工序的代码…

质量人,你还在等什么?快来六西格玛培训公司充电吧!——张驰咨询

在竞争激烈的商业环境中&#xff0c;质量成为了企业生存和发展的关键。而六西格玛&#xff0c;作为一种全球公认的质量管理方法论&#xff0c;正在成为越来越多企业追求品质革命的重要工具。而六西格玛培训公司&#xff0c;则成为了这场品质革命中&#xff0c;质量人不可或缺的…

mysql数据库管理面试题-1

1. 描述MySQL架构及其主要组件&#xff08;例如存储引擎、缓存、优化器等&#xff09;。 MySQL的架构可以分为三层&#xff1a; 客户端层&#xff1a;这是用户和MySQL数据库交互的接口&#xff0c;包括命令行工具、图形化管理工具等。 服务层&#xff1a;这是MySQL的核心部分…

菊花链通信技术整理

目录 一、菊花链简介 二、菊花链与CAN通信的区别 三、常见的菊花链AFE芯片 四、菊花链数据结构 五、菊花链方案介绍 一、菊花链简介 首先简单的说一下菊花链以及菊花链的应用&#xff0c;在目前国内的BMS开发中&#xff0c;我们应用最广泛的目前还还是分布式&#xff0c;…

c++ thread detach

#include <thread> #include <iostream>using namespace std;void func() {cout << "子线程func开始执行&#xff01;" << endl;//do somethingcout << "子线程func执行结束&#xff01;" << endl; }int main() {cout…

SOA 并不是一个单纯的 API

例子1&#xff1a;一个API不是SOA 场景&#xff1a;考虑一个简单的天气预报API&#xff0c;它允许开发者通过HTTP请求获取特定城市的天气信息。 说明&#xff1a; 单一功能&#xff1a;这个API可能只是提供了一个端点&#xff08;endpoint&#xff09;&#xff0c;比如/weat…

Linux:线程

文章目录 前言1. 线程概念1.1 什么是线程1.2 线程比进程更加轻量化1.3 虚拟地址到物理地址的转化物理内存的管理页表 1.4 线程的优点1.5 线程的缺点1.6 线程异常1.7 线程用途 2. 进程 vs 线程3. 线程控制3.1 线程创建3.2 线程退出3.3 线程等待3.4 分离线程3.5 线程取消 4. 线程…

Linux 系统的目录和文件管理

一、目录结 目录 一、目录结构和每个目录的作用 二、基本命令 1.分页查看more tail 命令 wc命令grep | 管道符 打包和解包 以及vim的用法 vim 文本编辑器单行替换 一、目录结构和每个目录的作用 二、基本命令 1.分页查看more tail 命令 wc命令 grep | 管道符 …

机器学习-6-对随机梯度下降算法SGD的理解

参考一文带您了解随机梯度下降(Stochastic Gradient Descent):python代码示例 参考sklearn-SGDClassifier 1 梯度下降 在机器学习领域,梯度下降扮演着至关重要的角色。梯度下降是一种优化算法,通过迭代沿着由梯度定义的最陡下降方向,以最小化函数。类似于图中的场景,可以…

mysql使用distinct去重计数

场景说明&#xff1a; 现在有一张表table_a&#xff0c;有字段a,b,c,d 现在需要对字段a和b进行去重计数&#xff0c;如果使用语句&#xff1a; select count(distinct(a, b)) from table_a; 那么执行后会报错&#xff1a; > 1241 - Operand should contain 1 column(s) 解…

english语法

从句&#xff1a;简单句连词 介词

Android studio sdk 虚拟机无法打开运行

1.确认是否在BIOS开启硬件虚拟化支持,选择Enable 2.win8/win10 Hyper-V冲突。控制面板-》程序与功能-》windows功能-》关闭 Hyper-V 3.sdk 路径非默认路径 复制avd C:\Users\Administrator\.android\avd 到 sdk的安装路径下 D:\Android\sdk 。重启软件重新启动即可

老板:2个亿的销售额,利润只有55万!电商这个生意真的到头了?

近来&#xff0c;一段对话轰动了半个电商圈的老板&#xff0c;干拼多多&#xff0c;2亿的销售额&#xff0c;利润只有55万&#xff01; 其实造成这一现象的原因就是“内卷” 说一句电商行业真实的现状&#xff0c;电商发展了十几年&#xff0c;网友对网购已经完全熟悉&#x…

js怎么生成验证码?js生成指定长度的随机字符串

在项目中经常有生成随机字符串的需求&#xff0c;比如验证接口签名、验证码(Node.js发送短信或邮箱验证码、生成图片验证码)&#xff0c;我们可以使用Javascript生成随机字符。 使用随机数从给出的可能字符中抽取合并字符串 优点是可以自定义结果中字符的取值&#xff0c;比如…

react 结合 ts

useState 中使用 ts type User {name: stringage: number } function App() {// 直接使用对象// const [user, setUser] useState<User | null>(null)// const [user, setUser] useState<User>({// name: jack,// age: 18// })// 使用函数返回对象cons…