如何使我在 VS 2015 Web 开发环境上运行的 AngularJS SPA 正确刷新

Posted 2023-03-05

【中文标题】如何使我在 VS 2015 Web 开发环境上运行的 AngularJS SPA 正确刷新

【英文标题】：How can I make my AngularJS SPA running on VS 2015 web development environment refresh correctly

【发布时间】：2016-08-30 21:32:40

【问题描述】：

我有一个使用 Visual Studio 2015 开发的 AngularJS SPA 应用程序。当我单击发布时，它会发布 index.html 并且工作正常。但是，如果我在一个页面上并单击刷新，那么它会尝试刷新 SPA 页面，例如 example.com/home/about。这失败了，因为我没有主页/关于页面。

有什么方法可以修改我的 web.config 文件（仅用于本地测试），以便它实际上进入 index.html（加载它），然后进入 /home/about 状态？

这是我当前的 web.config：

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>
</configuration>

【问题讨论】：

您需要在您的网络配置上设置 URL 重写规则

这就是你要找的东西吗：***.com/questions/12614072/…

【参考方案1】：

您似乎正在使用html5mode。在这种情况下，没有 # 来保持 URL 从请求到服务器的变化。 使用此配置，您需要服务器的帮助。它会在收到来自您的 SPA 路由的请求时为 index.html 提供服务。

这个SO answer 有关于在 web.config 上配置 URL 重写的详细信息：

规则：

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
            <add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
            <add input="REQUEST_URI" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

它假定您的 API 位于：/api 并且对于它找到的任何目录或文件，它都按原样提供服务。 其他任何内容，都被重写为/，将默认文档配置为index.html，将加载您的SPA。

另请注意，您需要为 IIS 安装 URL Rewrite module (IIS Express doesn't need the module)

另一个选项是这些轻量级 HTTP 服务器 npm 包之一。 John Papa has one: lite-server。它在后台使用BrowserSync：

BrowserSync 在超快速轻量级中完成了我们想要的大部分工作 开发服务器。它提供静态内容，检测变化， 刷新浏览器，并提供许多自定义。

创建 SPA 时，有些路由只有 浏览器。例如，/customer/21 可能是一个客户端路由 角应用程序。如果此路线是手动输入或直接链接到 作为 Angular 应用程序（又名深层链接）的入口点，静态 服务器将收到请求，因为 Angular 尚未加载。 服务器将找不到路由的匹配项，因此返回 404。 在这种情况下，所需的行为是返回 index.html（或 我们定义的应用程序的任何起始页面）。 BrowserSync 可以 不会自动允许后备页面。但它确实允许 自定义中间件。这就是 lite-server 介入的地方。

lite-server 是一个简单的 BrowserSync 自定义包装器，用于制作 很容易为 SPA 服务。

【讨论】：

我试过了，但它似乎不适用于 Visual Studio 2015 使用的开发服务器。