基于RuoYi前后端分离版框架部署的应用默认在根路径下,但在有些情况下我们希望部署在二级路径下。例如:https://www.ruoyi.vip/szrzyy 在这种情况下,可按照如下步骤修改。
该配置修改仅涉及前端及Nginx配置,后端无需做任何更改。
此处假设访问路径https://www.ruoyi.vip/szrzyy为示例配置。
修改vue.config.js中的VITE_APP_ENV属性
base: VITE_APP_ENV === 'production' ? '/szrzyy/' : '/',
修改 .env.production 中的VITE_APP_BASE_API属性
VITE_APP_BASE_API = '/szrzyy/prod-api'
修改router/index.js,修改 history:reateWebHistory() 配置。
const router = createRouter({
history: createWebHistory('/szrzyy/'),
routes: constantRoutes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
},
});
修改layout/components/Navbar.vue中的location.href
location.href = '/szrzyy/index';
修改utils/request.js中的location.href
location.href = '/szrzyy/index';
修改Nginx配置,增加如下内容
这里需要注意,需增加/szrzyy/prod-api/的location,否则后端请求的地址会变成https://www.ruoyi.vip/prod-api 就会出现404错误。(因为在根域名下无prod-api,或者因安全需要,无法在根域名下配置。)
location ^~/szrzyy {
alias /home/ruoyi/www/dist;
try_files $uri $uri/ /szrzyy/index.html;
index index.html;
}
location /szrzyy/prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# websocket参数
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://server/;
}
location ^~/ruoyi-plus-4.x {
alias /www/wwwroot/developers.nicsoft.pub/ruoyi_vue_plus_4.x/dist;
try_files $uri $uri/ /ruoyi-plus-4.x/index.html;
index index.html;
}
location /ruoyi-plus-4.x/prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# websocket参数
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://localhost:7081/;
}
location ^~/ruoyi-plus-5.x {
alias /www/wwwroot/developers.nicsoft.pub/ruoyi_vue_plus_5.x/dist;
try_files $uri $uri/ /ruoyi-plus-5.x/index.html;
index index.html;
}
location /ruoyi-plus-5.x/prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# websocket参数
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://localhost:7082/;
}