Nginx 配置前端工程项目二级目录

前提:

前端工程技术框架: vue 

后端工程技术工程:spring boot

需求:需要通过二级目录访问前端工程:

如之前:http://127.0.0.1:80/  改成 http://127.0.0.1/secondDirectory:80/

一.前端工程支持二级目录

1.编译文件index.js 增加 一个自定义变量 :process.env.SECOND_DIRECTORY值为二级目录  設置到參數

assetsPublicPath中

2.环境变量文件中env.js 中增加变量 SECOND_DIRECTORY 值为二级目录

3.路由文件router.js应用

4.加载配置时应用:

二  . 容器中nginx配置修改:

nginx.template主要配置如图

说明:关键是要前端工程支持二级目录访问

三 shell 脚本支持自定义修改上面内容打包前端工程

#!/bin/bash
#参数形式:ENV_PARAMS='[{"SECOND_DIRECTORY":"service"}]'
cd ${WORKSPACE}
# using private mirrors ensure that the dependent packages like node-sass can be downloaded successfully
echo "Value of ENV_PARAMS: ${ENV_PARAMS}"
SECOND_DIRECTORY="";
if [ -n "${ENV_PARAMS}" ] && [ "${ENV_PARAMS}" != "[]" ]; then# 执行你的 sed 命令,例如:SECOND_DIRECTORY=$(echo $ENV_PARAMS | grep -o '"SECOND_DIRECTORY":"[^"]*"' | awk -F'"' '{print $4}')# 可以添加更多的 sed 命令echo "Value of SECOND_DIRECTORY: ${SECOND_DIRECTORY}"
elseecho "ENV_PARAMS Nothing Do"
fiif [ -n "${SECOND_DIRECTORY}" ] && [ "${SECOND_DIRECTORY}" != "'/'" ]; then# 执行你的 sed 命令,例如:sed -i "s|^process.env.SECOND_DIRECTORY.*|process.env.SECOND_DIRECTORY = '/"${SECOND_DIRECTORY}"/'|" "${WORKSPACE}/config/index.js"sed -i "s|SECOND_DIRECTORY.*|SECOND_DIRECTORY:'\"/"${SECOND_DIRECTORY}"/\"',|" "${WORKSPACE}/config/prod.env.js"sed -i 's|second_directory|'"${SECOND_DIRECTORY}"'|' "${WORKSPACE}/nginx.template"# 可以添加更多的 sed 命令echo "SECOND_DIRECTORY Do"
elseecho "SECOND_DIRECTORY Nothing Do"
finpm config set registry  XXXXURL
npm install --unsafe-perm=true --allow-root
npm run buildcat $dockerFile

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

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

相关文章

docker安装es与kibana

docker安装es与kibana docker pull elasticsearch:7.11.2 docker network create esnet docker run --name es2 -p 9200:9200 -p 9300:9300 --network esnet -e "discovery.typesingle-node" -d elasticsearch:7.11.2 docker run -d -p 5601:5601 --network e…

PCIe 5.0 Layout Guide笔记

一、松耦合和紧耦合 松耦合优点是相同走线宽度下电介质更薄,同时对线间距的变化不敏感,提供了更好的阻抗控制;松耦合缺点是需要更大的区域进行绕线;紧耦合优点是更高的布线密度,相同阻抗下走线可以更细,同时具有更好的共模噪声抑制;紧耦合缺点是阻抗随线间距的变化大;【…

数据之巅:揭秘企业数据分析师如何成为企业的决策智囊

引言 在数字化浪潮中,企业数据分析师已成为企业决策的重要支撑。他们如同探险家,在数据的丛林中寻找着能够指引企业前行的宝贵信息。本文将深入剖析企业数据分析师的角色、挑战与成就,带你领略这个充满智慧与激情的职业风采。 一、从数字到智…

Word第一课

文章目录 1. 文件格式1.1 如何显示文件扩展名1.2 Word文档格式的演变1.3 常见的Word文档格式 3. 文档属性理解文档属性查看文档属性 4. 显示比例方式一: 手动调整方式二: 自动调整 5. 视图、窗口视图 1. 文件格式 1.1 如何显示文件扩展名 文档格式指的…

125 Linux C++ 系统编程4 Linux 静态库制作,动态库制作,静态库和动态库对比。静态库运行时找不到库的bug fix

一 静态库 和动态库 对比 静态库的原理:假设我们有一个 静态库,大小为500M,这个静态库实现了一些打牌的逻辑算法,提供了一堆API,让开发者 可以轻松的实现 54张扑克牌的随机发牌,指定发牌等功能。 我们写了…

自定义悬浮气泡组件

一.常用悬浮气泡展示 在一个项目中,常常会使用点悬浮展示,而市面上悬浮tooltip的组件非常多 例如常用的antd提供的Tooltip 用法如下(来自于官方文档示例): import React from react; import { Button, Tooltip, Con…

第一讲《八大人觉经》

《八大人觉经》。诸位法师。诸位居士。阿弥陀佛。好,大家请放掌。 我们这次,大家有很殊胜的因缘,由于净土梵音的启请,大家能够暂时的放下人世的尘劳,来共同学习《八大人觉经》。在讲述本经之前,我想简单地…

mysql-MVCC

一、基础概念 1. MVCC的含义 MVCC (Multiversion Concurrency Control),即多版本并发控制技术,它是通过读取某个时间点的快照数据, 来降低并发事务冲突而引起的锁等待, 从而提高并发性能的一种机制. MVCC 的实现,是通过保存数据…

【无刷电机学习】各种电机优势比较

目录 0 参考出处 1 有刷与无刷比较 2 交流与直流比较 3 内转子与外转子比较 4 Delta型与Y型定子绕向比较 5 低压BLDC的一些优点 0 参考出处 【仅作自学记录,不出于任何商业目的。如有侵权,请联系删除,谢谢!】 维基百科…

动态规划(算法竞赛)--线性DP编辑距离

1、B站视频链接&#xff1a;E07 线性DP 编辑距离_哔哩哔哩_bilibili 题目链接&#xff1a;编辑距离 - 洛谷 #include <bits/stdc.h> using namespace std; char a[2010],b[2010]; int f[2010][2010]; int main(){scanf("%s %s",a,b);int mstrlen(a),nstrlen(b…

C++笔记:二叉搜索树(Binary Search Tree)

文章目录 二叉搜索树的概念二叉搜索树操作1. 框架搭建2. 遍历3. 查找迭代实现递归实现 4. 插入迭代实现递归实现 5. 删除迭代实现递归实现 6. 析构与销毁7. 拷贝构造与赋值重载 二叉搜索树的应用二叉搜索树的性能分析二叉搜索树模拟实现源码 二叉搜索树的概念 二叉搜索树又称二…

HL祭记汇

一.写在前面 如果说廿四10天集训&#xff0c;对于我&#xff0c;是完成了从入门&#xff08;虽然可能我比别人入门更早&#xff1f;&#xff09;到准OIer的蜕变&#xff0c;那么&#xff0c;HL7天&#xff0c;可以说是真正成为了OIer&#xff0c;虽然是被小学生、初中生&#…