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