修改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'的值即可。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
若依框架是一个基于Vue.js的前端开发框架,可以帮助开发者快速构建企业级的管理系统。如果你想在若依框架中添加Vue组件,可以按照以下步骤进行: 1. 打开若依框架提供的vue项目,可以通过public/index.html、main.js和App.vue这三个文件来分析项目的结构和关系。 2. 首先,可以查看App.vue文件中的template内容,其中的<router-view />是用来展示路由组件的占位符。 3. 接下来,可以分析路由配置。在App.vue挂载完成后,会展示Layout组件。通过redirect属性重定向到index路径,即默认打开首页的tab页。这里需要注意的是,无论是通过router-link的to属性还是直接在浏览器输入路径,如果输入的是路由的路径,界面会同时展示父路由和路由对应的组件。 4. 根据路径的层级关系,可以确定在哪个组件中使用router-view来展示对应的组件。如果路径只有一层,如/home,那么对应的是App.vue中的router-view。如果路径有多层,如/home/SeatDistribute,那么需要找到父组件中的router-view,即Home.vue组件中的router-view。 5. 在若依框架中添加Vue组件的具体步骤可以根据你的需求而定。一般来说,你可以在src/views目录下创建一个新的Vue组件文件,然后在路由配置中添加对应的路由路径和组件引用。 总结起来,若依框架中添加Vue组件的步骤包括分析项目结构和关系、确定组件的展示位置、创建新的Vue组件文件,并在路由配置中添加对应的路径和组件引用。希望这些信息对你有帮助! #### 引用[.reference_title] - *1* *2* *3* [若依框架前端Vue项目分析实战](https://blog.csdn.net/qq1309664161/article/details/124041085)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值