修改RuoYi部署路径 适配nginx子路径访问
vue项目、RuoYi项目 部署子路径,适配nginx子路径访问
·
1 官方参考
若依官方文档提供了一种解决方式:前端手册 | RuoYi
若依文档给的已经很明白了,但如果子路径 /admin 发生改变,修改起来就感觉比较费事了,毕竟要修改4个文件。
这里咱们把子路径抽取出来,放到环境配置文件中.env.development或.env.production,
这样如果子路径发生改变,咱们只需要修改一处即可
2 修改步骤
1、在配置文件.env.development中定义一个子路径参数为 /subpath
# 部署后的子路径,对应nginx映射路径
VUE_APP_SUB_PATH = '/subpath'
2、修改vue.config.js中publicPath的值
publicPath: process.env.VUE_APP_SUB_PATH,
3、修改router/index.js
,添加一行base
属性
export default new Router({
base: process.env.VUE_APP_SUB_PATH,
mode: 'history', // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
4、修改layout/components/Navbar.vue
中的location.href
location.href = process.env.VUE_APP_SUB_PATH
由于在router/index.js中空值和/index对应同一个路由,这里为了适配子路径为"/"的情况,所以后边不用加/index
5、
修改utils/request.js
中的location.href
location.href = process.env.VUE_APP_SUB_PATH //+ '/index'
6、nginx的配置
location /subpath {
alias /home/ruoyi/projects/ruoyi-ui;
try_files $uri $uri/ /subpath/index.html;
index index.html index.htm;
}
这里有两点需要注意:
1、nginx配置中是alias而不是root;
2、 try_files $uri $uri/ /subpath/index.html; “/subpath”要在这里写一次,否则部署后无法刷新。
通过以上的配置,在部署过程中,如果nginx子路径改变,前端代码只需要更改配置文件中 VUE_APP_SUB_PATH = '/subpath'的值即可。
更多推荐
已为社区贡献1条内容
所有评论(0)