Angular 19（基于Vite）自定义base href的开发环境配置问题

针对你遇到的部署子路径但开发模式资源报错的问题，有两个直接有效的解决方式：

方式一：启动开发服务器时添加参数 #

直接在ng serve命令后加上--base-href和--serve-path参数，就能让开发服务器适配/spa子路径：

ng serve --base-href /spa/ --serve-path spa

• --base-href /spa/：自动将index.html里的base标签设置为<base href="/spa/">，和生产环境保持一致
• --serve-path spa：让Angular开发服务器监听/spa路径下的所有请求，把/spa前缀的资源请求映射到实际的开发资源文件上，避免出现找不到资源的错误

启动后直接访问http://localhost:4200/spa就能正常加载应用，资源请求路径也会自动带上/spa前缀。

方式二：修改angular.json配置，永久生效 #

如果不想每次启动都输参数，可以修改项目根目录下的angular.json文件，在对应项目的serve配置里添加默认参数：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "serve": {
          "options": {
            "baseHref": "/spa/",
            "servePath": "spa",
            // 其他原有配置...
          }
        }
      }
    }
  }
}

保存后直接运行ng serve就会自动应用这些配置，效果和方式一完全一样。

这样处理后，开发模式下的资源请求路径会和生产部署在ASP.NET/spa子路径的情况完全匹配，既不用修改Vite配置，也能避免NS_ERROR_CORRUPTED_CONTENT错误。

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