如何从部署在子目录的独立Vue应用路由跳转至根域名首页？

方案1：直接使用动态origin（最便捷，无需配置环境变量） #

你不需要硬写完整域名，直接读取当前页面的origin属性即可自动适配所有环境：

// router.js
{
  path: "/home",
  beforeEnter(to, from, next) {
    // 自动取当前域名根地址，生产环境是https://www.example.com，开发环境对应本地服务地址
    window.location.href = window.location.origin
  }
}

如果你的根站点后续可能部署在其他子路径，也可以拼接成你需要的固定路径，比如window.location.origin + '/xxx'。

方案2：通过环境变量区分环境 #

如果不同环境下根站点地址不是同源的，你可以用Vue项目内置的环境变量配置实现多环境适配：

1. 在项目根目录的.env.development文件中添加开发环境配置（Vue CLI项目前缀为VUE_APP_，Vite项目前缀为VITE_）：

# Vite 示例
VITE_APP_ROOT_SITE=http://localhost:5173
# Vue CLI 示例
# VUE_APP_ROOT_SITE=http://localhost:8080

2. 在.env.production文件中添加生产环境配置：

VITE_APP_ROOT_SITE=https://www.example.com

3. 改造路由配置：

// Vite 写法
window.location.href = import.meta.env.VITE_APP_ROOT_SITE
// Vue CLI 写法
// window.location.href = process.env.VUE_APP_ROOT_SITE

方案3：Nginx层配置重定向（更推荐，性能更高） #

该重定向逻辑本质属于部署层规则，直接在Nginx中配置会更高效，不需要修改前端代码：

# nginx.conf 对应站点配置块中添加
rewrite ^/app/home$ / permanent;

配置后重启Nginx即可生效，所有访问/app/home的请求会直接在服务层跳转到根路径，完全不经过前端应用逻辑。

内容的提问来源于stack exchange，提问作者Sankha Karunasekara