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

        

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

线性规划库PuLP使用教程

Python求解线性规划——PuLP使用教程 简洁是智慧的灵魂,冗长是肤浅的藻饰。——莎士比亚《哈姆雷特》 文章目录 一、说明二、安装 PuLP 库三、线性规划简介3.1 线性规划3.1.1 高考题目描述3.1.2 基本概念 3.2 整数规划3.2.1 题目描述[3]3.2.2 解题思路 四、求解过程…

Python实现数据可视化效果图总结

一、JSON格式 JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据。 JSON本质上是一个带有特定格式的字符串 Json格式 JSON数据格式在Python中可以是字典、又可以是列表中嵌套着字典的格式。 Pyhton数据和Json数据相互转化 二、pyecharts模块 如果想…

NL6621 实现获取天气情况

一、主要完成的工作 1、建立TASK INT32 main(VOID) {/* system Init */SystemInit();OSTaskCreate(TestAppMain, NULL, &sAppStartTaskStack[NST_APP_START_TASK_STK_SIZE -1], NST_APP_TASK_START_PRIO); OSStart();return 1; } 2、application test task VOID TestAp…

Node.js —— 前后端的身份认证 之用 express 实现 JWT 身份认证

JWT的认识 什么是 JWT JWT(英文全称:JSON Web Token)是目前最流行的跨域认证解决方案。 JWT 的工作原理 总结:用户的信息通过 Token 字符串的形式,保存在客户端浏览器中。服务器通过还原 Token 字符串的形式来认证用…

idea2024 nacos中文报错

idea2024 nacos中文报错 报错提示为:Input length 1 报错原因:项目启动编码与nacos编码不一致。 处理方式 添加启动参数utf8修改项目编码格式为utf8 修改idea.vmoptions Help -> Edit Custom 添加一行:-Dfile.encodingUTF-8

解决LabVIEW通过OPC Server读取PLC地址时的错误180121602

在使用LabVIEW通过OPC Server读取PLC地址时,若遇到错误代码180121602,建议检查网络连接、OPC Server和PLC配置、用户权限及LabVIEW设置。确保网络畅通,正确配置OPC变量,取消缓冲设置以实时读取数据,并使用诊断工具验证…

项目9-网页聊天室2(登录)

0.前端知识储备 Ajax请求中的async:false/true的作用 - front-gl - 博客园 (cnblogs.com) 01.前端页面展示 02.后端代码 2.1 CONTROLLER RequestMapping("/login")public Result login(String username, String password, HttpSession httpSession){User user …

macOS Monterey 12.7.5 (21H1222) Boot ISO 原版可引导镜像下载

macOS Monterey 12.7.5 (21H1222) Boot ISO 原版可引导镜像下载 5 月 13 日凌晨,macOS Sonoma 14.5 发布,同时带来了 macOS Ventru 13.6.7 和 macOS Monterey 12.7.5 安全更新。 本站下载的 macOS 软件包,既可以拖拽到 Applications&#x…

windows上pycharm调试streamlit应用

windows上pycharm调试streamlit应用 开发环境: PyCharm 2023.3.5 (Professional Edition) windows10 conda(python3.11.7) streamlit1.33.0 创建应用 app.py import streamlit as stst.header("hello") st.write("this is a streamlit demo")启动应…

使用Python探究OpenAI API

谁没听说过OpenAI?这家人工智能研究实验室因其著名的产品ChatGPT而改变了世界。它改变了AI实施领域,许多公司现在急于成为下一大热点。 尽管竞争激烈,OpenAI仍然是任何生成式AI业务需求的首选公司,因为它拥有最好的模型和持续的支持。该公司…

【Jmeter】使用Jmeter进行接口测试、跨线程组获取参数

Jmeter接口测试 Jmeter设置成中文实操练习-跨线程组提取参数,使用值HTTP请求默认值&HTTP信息头管理器 相信打算从事测试工程师的同学们,肯定对Jmeter是耳熟能详的。使用Jmeter可以进行接口测试、性能测试、压力测试等等;这个章节介绍如何…

【机器学习论文阅读笔记】Robust Recovery of Subspace Structures by Low-Rank Representation

前言 终于要轮到自己汇报了好崩溃。。盯着论文准备开始做汇报ppt感觉一头乱麻,决定还是写博客理清思路再说吧 参考资料: 论文原文:arxiv.org/pdf/1010.2955 RPCA参考文章:RPCA - 知乎 (zhihu.com) 谱聚类参考文章&#xff1a…

Ubuntu 安装 LibreOffice

1. 删除预安装的LibreOffice Ubuntu 和其他的 Linux 发行版带有预安装的 LibreOffice。这可能不是最新的,这是因为发行版有特定的发行周期。在进行新安装之前,你可以通过以下命令删除 Ubuntu 及其衍生发行版中的的旧版本。 sudo apt remove –purge li…

Java进阶学习笔记2——static修饰成员变量

static: 叫静态,可以修饰成员变量、成员方法。 成员变量按照有无static修饰,分为两种: 类变量:有static修饰,属于类,在计算机中只有一份,会被类的全部对象共享。静态成员变量。 实…

FL Studio2025新功能大揭秘,你准备好了吗?

FL Studio,常被音乐制作者亲切地称为“水果”编曲软件,是比利时的Image-Line公司研发的一款完整的软件音乐生产环境或数字音频工作站(DAW)。自从1997年推出以来,它已经成为全世界众多电子音乐制作者和DJ的首选工具&…

信息学奥赛初赛天天练-10-组合数学-排列组合-一次彻底搞懂分组分配问题

更多资源请关注纽扣编程微信公众号 平均分组 是指将所有的元素分成所有组元素个数相等或部分组元素个数相等,即m个不同的元素平均分成n个组,有多少种分组方法 由于是平均分组,分组选择元素时会出现重复,因此结果需要除以A(n,n…

C++的数据结构(十八):并查集

并查集(Union-Find)是一种用于处理一些不交集(Disjoint Sets)问题的数据结构。它主要支持两种操作:合并集合(Union)和查找元素所属集合(Find)。在解决诸如连通性问题、网…

【Linux】POSIX线程库——线程控制

目录 1.线程创建方法 例:多线程创建 2.线程终止 2.1 return nulptr; 2.2 pthread_exit(nullptr); 3. 线程等待 3.1 等待原因 3.2 等待方法 线程终止的返回值问题 4.线程取消 5. 线程分离 5.1 分离原因 5.2 分离方法 6.封装线程 用的接口是POSIX线程库…

读人工智能时代与人类未来笔记13_网络57

1. jun背控制 1.1. 威慑的目的是通过威胁发动盒站来防止盒站 1.2. jun背控制的目的是通过限制甚至废除57(或57类别)本身来防止盒站真 1.2.1. 与盒不扩散相配合,以一整套详尽的条约、技术保障措施、监管和其他控制机制为支撑,所…

如何生成Github Badge徽章图标

如何生成徽章Badge 什么是徽章(Badge)生成小徽章shields网站开源项目的徽章lib版本徽章代码测试覆盖度开源协议Github workflow的徽章 开源代码实践效果py-enumjs-enumerate 什么是徽章(Badge) 在开源项目的README中,经常会见到一些徽章(Badge)小图标,如…