部署到子路径下的应用路径配置详解

在某些场景下，您可能需要将前端应用部署到一个子路径下，例如 https://www.ruoyi.vip/admin。为了确保应用在该子路径下能够正常运行并访问相关资源，需要进行一些配置修改。下面是详细的配置流程：

一、修改 vue.config.js 中的 publicPath 属性

publicPath 用于指定项目的基础路径。当应用部署在子路径下时，需要将 publicPath 设置为子路径。

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/admin/",
  // 其他配置...
}

• process.env.NODE_ENV === "production"：当环境为生产环境时，publicPath 被设置为 /admin/。
• 对于开发环境（通常是 npm run serve ），也需要设置为 /admin/ 以便与生产环境保持一致。

二、修改 router/index.js 中的 base 属性

在 Vue Router 中，base 属性用于指定应用的基本路径。此路径会被自动添加到所有路由路径的前面。

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import constantRoutes from './routes'

Vue.use(Router)

export default new Router({
  base: "/admin", // 设置应用的基础路径
  mode: 'history', // 去掉URL中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

• base: "/admin"：确保所有路由都以 /admin 为基础路径。
• mode: 'history'：使用 HTML5 历史模式去掉 URL 中的 #。

三、修改 /index 路由中的子路径

确保应用在子路径下能够正确导航，需要修改导航中的路径。在此示例中，您需要在 Navbar.vue 和 request.js 中做相应的调整。

1. 修改 Navbar.vue 中的 location.href

修改导航栏组件中的路径，以便在导航时正确定位到子路径。

// src/layout/components/Navbar.vue
// 将导航地址设置为子路径下的首页
location.href = '/admin/index';

2. 修改 utils/request.js 中的 location.href

在处理请求错误时，可能会重定向到登录页或首页。需要确保这些重定向路径也包含子路径。

// src/utils/request.js
// 当发生错误时，确保重定向路径包含子路径
location.href = '/admin/index';

四、修改 Nginx 配置

为了确保前端应用在子路径下能够正确访问资源，需要在 Nginx 配置中为该子路径添加相应的配置。

# Nginx配置
location /admin {
    alias   /home/ruoyi/projects/ruoyi-ui; // 设置项目的实际路径
    try_files $uri $uri/ /admin/index.html; // 处理刷新时的路由问题
    index  index.html index.htm;
}

• location /admin：指定应用的访问路径为 /admin。
• alias：设置子路径的实际文件路径，即应用的根目录。
• try_files $uri $uri/ /admin/index.html：解决刷新页面时路径问题，确保在路由刷新时仍能正确加载页面。

五、验证配置

配置完成后，打开浏览器，输入 https://www.ruoyi.vip/admin，确保能够正常访问并刷新页面。如果页面能够正常加载并刷新，表示配置成功。