若依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);}},