Angular 15中如何将localhost:4200重定向至localhost:4200/{baseUrl}

嘿，我完全懂你遇到的情况——已经在Angular 15的angular.json里把baseHref设为test了，现在localhost:4200/test能正常跑应用，但想让根路径localhost:4200自动跳转到这个带baseHref的路径，之前试代理还踩了循环重定向的坑对吧？

给你两个靠谱的解决办法，适配开发环境的场景：

方法一：静态重定向文件快速解决 #

这个方法简单直接，适合开发时临时用：

• 在项目的src目录下新建一个root-redirect.html文件，内容如下：

  <!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="refresh" content="0; url='/test'">
    </head>
    <body>
      正在跳转到应用页面... 如果没自动跳转，请点击 <a href="/test">这里</a>
    </body>
  </html>
  

• 启动ng serve的时候，带上参数指定这个重定向文件作为根路径的入口：

  ng serve --base-href /test --serve-path / --index root-redirect.html
  

  这样一来，访问localhost:4200时会加载这个静态文件，自动跳转到localhost:4200/test，而你的Angular应用依然正常运行在/test路径下，不会有冲突。

方法二：避免代理循环重定向的正确姿势 #

你之前用代理配置踩坑，大概率是因为规则写反或者互相指向了——比如把根路径的请求代理到/test，但/test的请求又被代理回根路径，就会无限循环。如果非要用代理，得精准匹配根路径的请求，代理配置可以这么写：

{
  "/": {
    "target": "http://localhost:4200/test",
    "secure": false,
    "pathRewrite": {"^/": ""},
    "redirect": "permanent"
  }
}

不过说实话，这个方法不如第一个省心，容易出问题，更推荐静态重定向的方式。

要是你是在生产环境部署，那直接在服务器层面加重定向规则就好，比如Nginx可以这么配：

location = / {
  return 301 /test;
}

但开发环境用ng serve的话，第一种方法就足够啦。

备注：内容来源于stack exchange，提问作者ivan