如何在Visual Studio 2022中修改网站根目录及解决运行报错

云原生阿岚

2026-8-29

运行环境

Windows 10
Visual Studio 2022 17.2.4
Angular 16.15.1

操作背景

通过ng new [project-name] etc命令创建Angular项目，项目配置文件存放于根目录，网站源码存放于/src文件夹；通过Visual Studio 2022的「File > Open > WebSite...」路径打开项目后，VS会自动在根目录生成Web.config文件。

核心诉求

从VS启动站点时默认打开地址为http://localhost:61500/src/index.html，因不希望使用完整版IIS，期望通过配置实现以下效果：

基础目标：启动地址变为http://localhost:61500/index.html，去除路径中的/src层级
最优效果：直接访问根路径http://localhost:61500/即可打开站点
需要确认当前场景下是否可实现上述配置。

已尝试的无效方案

方案1：参考社区公开方案在Web.config中添加如下URL映射、重写规则配置，配置后未产生任何效果：

<system.web>
    (...)
      <urlMappings enabled="true">
          <add url="~/" mappedUrl="~/src/index.html" />
      </urlMappings>

  </system.web>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Redirect everything to root" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/src/{R:0}" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>

方案2：参考其他社区方案添加永久重定向配置，首次启动根路径直接报服务器错误；删除该配置后，站点启动访问http://localhost:61500/固定返回HTTP Error 403.14 - Forbidden错误，原本可正常访问的http://localhost:61500/src/index.html路径也同步返回禁止访问错误，该阶段曾排查是否存在可清理的本地缓存。对应配置如下：

<system.webServer>
        <httpRedirect enabled="true" destination="http://localhost:61500/" exactDestination="true" httpResponseStatus="Permanent" />
    </system.webServer>

方案3：彻底删除Web.config、VS关联文件夹、C盘路径C:\Users\[UserName]\source\repos下的对应解决方案文件，重新以全新网站形式打开项目，启动后仍返回403.14禁止访问错误。

排查测试结论

在任意位置新建纯静态简单网站，在VS中以网站形式打开可正常运行，无403.14错误
将Angular项目重命名，把上述简单测试网站的文件移入该Angular项目目录后，在VS中打开可正常运行，无403.14错误
彻底删除Angular项目后通过原ng new命令重新生成全新项目，在VS中打开仍报403.14错误

基于以上测试结果，提出两点推测：

VS内置调试用IIS Express存在未公开的识别逻辑，匹配到特定路径+Angular标准文件结构时会主动触发403.14错误
不确定不启动Node.js服务的情况下，直接以静态网站形式打开Angular源码目录是否能正常运行项目

当前临时方案

初期放弃仅通过VS原生配置解决问题，采用XAMPP搭建本地站点，在VS中右键项目>Property Pages>Start Options，选择Start URL并配置使用自定义服务器，填入XAMPP中配置的本地站点域名（因处于Angular学习初期，暂不确定该方案是否可完全适配Angular项目运行需求）。
后续意识到/src是源码开发目录，本身不应当作为站点根目录，且VS不会自动编译Angular项目——即使界面提示编译成功，也不会生成实际可运行的编译产物。因此调整方案：通过ng build命令编译站点，将本地站点域名指向[project-path]\dist\[project-name]\编译产物路径后，首个Hello World示例可正常运行，<app-root></app-root>位置可正常渲染title字段内容。
目前仍在寻找可解决初始路径问题的VS原生配置方案。

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