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

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

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

文章目录


一、vue.config.js

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

js 复制代码
publicPath: process.env.NODE_ENV === "production" ? "/health-care" : "/",

二、router/index.js

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

js 复制代码
base: process.env.NODE_ENV === 'production' ? '/health-care' : '/',

三、Navbar.vue

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

js 复制代码
location.href = process.env.NODE_ENV === "production" ? "/health-care" : "" + '/index';

四、request.js

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

js 复制代码
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;
  • 片段
yaml 复制代码
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;
     }
  • 完整配置
java 复制代码
 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下

②:背景图片路径

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

③:动态图片路径

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

④:获取静态资源的请求

  • 使用 require 来加载静态资源
js 复制代码
        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);
            }
        },
相关推荐
三翼鸟数字化技术团队11 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2381 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆1 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang1 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
前端Hardy1 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html