若依ruoyi-vue部署在子域名下（做为子应用）
特殊情况需要部署到子路径下（做为子应用）
文章目录
- 若依ruoyi-vue部署在子域名下（做为子应用）
- 一、vue.config.js
- 二、router/index.js
- 三、Navbar.vue
- 四、request.js
- 五、修改nginx配置
- 六、测试
- 七、静态资源（图片等）
一、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);
}
},