在使用若依框架进行项目开发时，很多开发者可能会遇到一个问题：当项目部署在二级目录下时，退出登录后会跳转到Nginx的404页面。这个问题通常是由于路由配置不正确导致的。本文将详细介绍如何通过修改环境变量和路由配置来解决这个问题。

问题描述

若依框架是一个基于Vue.js的前后端分离框架，通常我们会将项目部署在服务器的根目录下。然而，在某些情况下，项目可能需要部署在二级目录中（例如 /xxx-manage）。在这种情况下，退出登录后，页面可能会跳转到Nginx的404页面，而不是预期的登录页面。

解决方法

要解决这个问题，我们需要进行以下两步操作：

1. 修改 .env.production 文件

首先，我们需要在项目的 .env.production 文件中添加一个环境变量 VUE_APP_APP_NAME，用于指定项目部署的二级目录路径。这里的 /xxx-manage 是你项目部署的二级目录路径，根据实际情况进行修改。

# 相对于域名的路径
VUE_APP_APP_NAME = '/xxx-manage'

2. 修改路由配置

接下来，我们需要修改项目的路由配置，确保路由的 base 属性能够正确识别二级目录。

在项目的 router 配置文件中，找到路由的导出部分，修改代码如下：

export default new Router({
  base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/",
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

在这段代码中，base 属性会根据 VUE_APP_APP_NAME 环境变量的值来设置路由的基础路径。如果 VUE_APP_APP_NAME 存在，则使用该值作为基础路径；否则，使用根路径 /。

3. 重新打包部署

完成上述修改后，重新打包项目并部署到服务器上。此时，退出登录后应该能够正确跳转到登录页面，而不会再出现404错误。

总结

若依有时候挺坑的。。。。。。。。。

希望这篇文章能够帮助到遇到类似问题的小伙伴。如果你有其他问题或建议，欢迎在评论区留言讨论。