若依ruoyi-vue部署在子域名下(做为子应用)

本文主要是介绍若依ruoyi-vue部署在子域名下(做为子应用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

若依ruoyi-vue部署在子域名下(做为子应用)

特殊情况需要部署到子路径下(做为子应用)

文章目录

  • 若依ruoyi-vue部署在子域名下(做为子应用)
  • 一、vue.config.js
  • 二、router/index.js
  • 三、Navbar.vue
  • 四、request.js
  • 五、修改nginx配置
  • 六、测试
  • 七、静态资源(图片等)
    • ①:修改静态资源路径
    • ②:背景图片路径
    • ③:动态图片路径
    • ④:获取静态资源的请求


一、vue.config.js

1. 修改vue.config.js中的 publicPath

publicPath: process.env.NODE_ENV === "production" ? "/health-care" : "/",

在这里插入图片描述

二、router/index.js

1. 修改router/index.js 添加一行base属性

base: process.env.NODE_ENV === 'production' ? '/health-care' : '/',

在这里插入图片描述

三、Navbar.vue

1. 修改src/layout/components/Navbar.vue 中的 location.href

location.href = process.env.NODE_ENV === "production" ? "/health-care" : "" + '/index';

在这里插入图片描述

四、request.js

1. 修改request.js 中的 location.href

location.href = process.env.NODE_ENV === "production" ? "/health-care" : "" + '/index';

在这里插入图片描述

五、修改nginx配置

注意:修改三处

  • nginx配置中是alias而不是root
  • location /health-care
  • try_files $uri $uri/ /health-care/index.html;
  • 片段
location /health-care {# 配置前端资源的路径,将 /health-care 请求路径映射到实际的项目打包输出目录alias /usr/local/project/item_ruoyi/dist;# 指定默认访问的文件,index.html 或 index.htmindex index.html index.htm;# 尝试访问 URI(即请求路径),如果文件或目录不存在,则将请求重定向到 /health-care/index.html# 这是为了支持 Vue Router 等前端路由方式(history 模式)try_files $uri $uri/ /health-care/index.html;}
  • 完整配置
 server {listen 18080;                #监听端口server_name  _;location /stage-api/ {# 这里配置代理到后端服务的地址proxy_pass http://127.0.0.1:8080/;}location /health-care {# 这里配置前端资源的路径alias /usr/local/project/item_ruoyi/dist;index index.html index.htm;try_files $uri $uri/ /health-care/index.html;}}

六、测试

访问路径后面应该带上子路径/health-care

  • 原访问路径:http://60.20.1.12:18080
  • 现访问路径:http://60.201.12:18080/health-care

在这里插入图片描述

在这里插入图片描述

七、静态资源(图片等)

①:修改静态资源路径

  • 将public 下的静态资源放在src下

在这里插入图片描述

②:背景图片路径

  • 使用相对路径
 background-image: url('../../../assets/img/slices/title@2x.png');
 .my-header {height: 6%;box-sizing: border-box;background-image: url('../../../assets/img/slices/title@2x.png');background-size: 100% 100%; /* 背景图片覆盖整个元素 */background-repeat: no-repeat; /* 防止背景图片重复 */background-position: center center; /* 背景图片居中 */}

③:动态图片路径

  • 有时需要动态获取图片路径
<div class="top-card" v-for="item in button_list" :key="item.id" ><img alt="" :src="item.currentUrl || item.url"/></div>
  • 使用 require 来加载静态资源
button_list: [{id: 1,url:  require('../../../assets/img/slices/center_elder2@2x.png'),hover_url:  require('../../../assets/img/slices/center_elder1@2x.png'),currentUrl: ''},{id: 2,url:  require('../../../assets/img/slices/center_social2@2x.png'),hover_url:  require('../../../assets/img/slices/center_social1@2x.png'),currentUrl: ''}]

④:获取静态资源的请求

  • 使用 require 来加载静态资源
        async set_register_map() {// let response = await axios.get('/json/songJiang.json');// let geoJson = response.data;// echarts.registerMap('songJiang', geoJson);try {// 使用 require 来加载 JSON 文件let geoJson = require('@/assets/json/songJiang.json');echarts.registerMap('songJiang', geoJson);} catch (error) {console.error('Error loading songJiang.json:', error);}},

这篇关于若依ruoyi-vue部署在子域名下(做为子应用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Spring Boot3.0新特性全面解析与应用实战

《SpringBoot3.0新特性全面解析与应用实战》SpringBoot3.0作为Spring生态系统的一个重要里程碑,带来了众多令人兴奋的新特性和改进,本文将深入解析SpringBoot3.0的... 目录核心变化概览Java版本要求提升迁移至Jakarta EE重要新特性详解1. Native Ima

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

MySQL 主从复制部署及验证(示例详解)

《MySQL主从复制部署及验证(示例详解)》本文介绍MySQL主从复制部署步骤及学校管理数据库创建脚本,包含表结构设计、示例数据插入和查询语句,用于验证主从同步功能,感兴趣的朋友一起看看吧... 目录mysql 主从复制部署指南部署步骤1.环境准备2. 主服务器配置3. 创建复制用户4. 获取主服务器状态5

Redis中Stream详解及应用小结

《Redis中Stream详解及应用小结》RedisStreams是Redis5.0引入的新功能,提供了一种类似于传统消息队列的机制,但具有更高的灵活性和可扩展性,本文给大家介绍Redis中Strea... 目录1. Redis Stream 概述2. Redis Stream 的基本操作2.1. XADD

JSONArray在Java中的应用操作实例

《JSONArray在Java中的应用操作实例》JSONArray是org.json库用于处理JSON数组的类,可将Java对象(Map/List)转换为JSON格式,提供增删改查等操作,适用于前后端... 目录1. jsONArray定义与功能1.1 JSONArray概念阐释1.1.1 什么是JSONA

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

如何在Ubuntu 24.04上部署Zabbix 7.0对服务器进行监控

《如何在Ubuntu24.04上部署Zabbix7.0对服务器进行监控》在Ubuntu24.04上部署Zabbix7.0监控阿里云ECS服务器,需配置MariaDB数据库、开放10050/1005... 目录软硬件信息部署步骤步骤 1:安装并配置mariadb步骤 2:安装Zabbix 7.0 Server

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提