Question

我有一个使用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>

Answer 1

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

此SO answer详细介绍了如何在web.config上配置URL Rewrite：

规则经过：

  <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提供服务。

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

1 个答案: