如何在 RuoYi-Vue-Plus 中修改应用路径（314）

在使用 RuoYi-Vue-Plus 时，您可能需要根据项目需求修改应用的访问路径。本文将详细介绍如何修改后端和前端的应用路径，并确保它们在开发环境和生产环境中都能正确地协同工作。

修改后端路径

首先，需要修改后端的应用路径，这可以通过更改 application.yml 文件中的 server.servlet.context-path 参数来实现。这个参数定义了后端应用的根路径，修改后可以更改应用的访问路径。

server:
  servlet:
    context-path: /admin

此路径的修改影响后端 API 的访问地址，因此前端也需要进行相应的调整。

在开发环境中，前端通过 Vite 进行代理，以便访问后端 API。需要在 vite.config.ts 中更新代理路径，使其与新设置的后端路径一致。

proxy: {
  [env.VITE_APP_BASE_API]: {
    target: 'http://localhost:8080/admin',
    changeOrigin: true,
    ...
  }
}

在生产环境中，通常使用 Nginx 作为前端的反向代理服务器。为了确保前端能够正确地访问后端 API，需要在 Nginx 的配置文件 nginx.conf 中更新后端代理路径。

location /prod-api/ {
    proxy_pass http://localhost:8080/admin/;
}

这一步骤确保在生产环境下，前端可以通过正确的路径访问后端服务。

自 3.4.0 版本起，RuoYi-Vue-Plus 提供了一种更为简便的方法来修改前端的应用路径。在不同环境下，您可以通过修改 .env 文件来配置 VITE_APP_CONTEXT_PATH 参数，该参数定义了前端应用的根路径。

VITE_APP_CONTEXT_PATH=/admin

修改此参数后，前端的所有静态资源和路由都会基于这个新的路径进行访问。

在生产环境中，同样需要修改 Nginx 的配置文件 nginx.conf，以确保前端应用的访问路径与前端配置的 VITE_APP_CONTEXT_PATH 保持一致。

location /admin/ {
    root /usr/share/nginx/html/admin/;
    index index.html;
    try_files  $uri$ uri/ /index.html;
}

此配置确保在生产环境中，前端应用可以通过 /admin/ 访问，并且 Nginx 能正确处理前端路由。

保持前后端路径一致：在修改路径时，务必确保前端和后端的路径配置保持一致，否则可能导致前端无法正确访问后端 API。
验证配置文件：修改完路径后，建议检查所有相关配置文件（如 application.yml、vite.config.ts、.env 文件、nginx.conf 等），确保路径更新正确。
路径层级：在生产环境中，如果使用了多层目录部署，记得修改实际目录结构以适应新的路径需求。如果不需要多层目录，可以简化路径配置。

通过以上步骤，您可以顺利地在 RuoYi-Vue-Plus 项目中修改应用路径，并确保项目在不同环境下都能正常运行。