Question

我正在开发一个项目，我希望在VS2015作为MVC / Webapi项目的一个项目中构建REST Api和angular2前端。

项目设置和文件夹结构：

在我的VS解决方案中，我使用以下设置创建了一个新的ASP.NET Web应用程序项目：

在我的项目的根目录中，我添加了一个名为Public的新文件夹，其中包含整个前端源。 对于我的angular2前端，我使用angular/angular2-seed作为起点。

在我的Public文件夹中，实际的网络应用程序将位于另一个名为dist的文件夹中，可能如下所示：

虽然我的VS解决方案看起来像这样：

我的目标：

现在，在http://localhost/运行IIS服务器时，我希望实现

• 我的REST Api将定位于http://localhost/api/...（仅供参考，此时并非真正的问题）
• 其他所有路线都将定位到位于index.html
文件夹中的/Public/dist/

现在到了棘手的部分：

• 我希望网址很漂亮，所以在我的浏览器地址栏中它应该显示http://localhost/，而其他每个网段应该由我的angular2应用程序的路由器处理。例如，我有一个组件dashboard，因此http://localhost/dashboard应该由IIS路由到我的index.html文件，其中angular2路由器将启动以显示组件的相应.html文件。
• 我不想将我的前端代码/标记的部分重新定位到另一个文件（例如在Index.cshtml中创建Views/Home或类似的东西
• 最后，我不希望前端开发人员（我^^）再次担心我的应用程序放在哪个环境中，这意味着我不想触及<base href>标记{ {1}}应始终如下index.html。我不知道这是否可行，但我绝对不想把<base href="/">放在那里。

到目前为止我尝试了什么：

现在刚开始项目最终会出现混乱的行为，因为我必须手动导航到/public/dist/，然后我会打开我的应用并导航到类似http://localhost/public/dist/的内容。刷新会破坏它，导致找不到这条路线。

第一个真正的方法是在答案中使用网址映射：How can I configure a route for WebApiConfig to redirect some requests to static html page?

http://localhost/public/dist/dashboard

嗯，没用。好吧，它自己路由到应用程序，但URL仍然看起来很丑陋，还有一些东西被打破了。

之后我尝试了<urlMappings enabled="true"> <add url="~/" mappedUrl="~/Public/dist/index.html" /> </urlMappings> 看起来像这样：

RouteConfig

在我的public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "publicOverride", url: "{*.}", defaults: new { controller = "Public", action = "Index" } ); } } 我尝试了几种方法来返回我的index.html，例如

PublicController

如果我将public ActionResult Index() { var result = new FilePathResult("~/Public/dist/index.html", "text/html"); return result; } 标记更改为我不想要的<base>并且网址仍为<base href="/Public/dist/">，则可以使用此功能。至少，在这种情况下，刷新会起作用。

我尝试在我的IIS中直接更改网站选项以指向http://localhost/Public/dist/dashboard这种情况，但这会再次破坏应用程序的刷新和直接导航到public/dist这样的东西不起作用同样。

之后，我玩了几个本可以帮助的东西，但实际上并没有。例如，在这个问题中：How to route EVERYTHING other than Web API to /index.html我尝试了所有答案，以及OP的解决方案（在编辑部分）。 大喊大叫，扔掉电脑，砸在键盘和屏幕上也无济于事。

有什么方法可以实现这个目标吗？

**编辑 - 当前解决方案**

我已将http://localhost/dashboard复制为index.html（在视图/主页/文件夹中），更正了路径（以便包含每个脚本且基本标记位于Index.cshtml开始）并创建一个HomeController，它将返回此View。 在我的angular2项目中，我将基本标记设置为/Public/dist/，因此操纵index.html / .cshtml是我必须忍受的东西，我想。

现在，重要的一步是将<base href="/public/dist">添加到a​​ngular2 APP_BASE_HREF函数中，但将bootstrap作为值：

/

这将消除我的所有网址开始使用bootstrap(AppComponent, [ HTTP_PROVIDERS, ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' }) ]).catch(err => console.error(err)); 而不是从http://localhost/public/dist/...开始的行为。

Answer 1

您可能希望添加网址重写规则，以便将请求路由到index.html的所有内容，但webapi请求除外。将这样的内容添加到web.config：

<system.webServer>
  <rewrite>
    <rules>
      <rule name="RewriteUnknownToIndex" patternSyntax="ECMAScript" stopProcessing="true">
        <match url="^(public|api)/.*" negate="true"/>
        <action type="Rewrite" url="/public/dist/index.html"/>
      </rule>
    </rules>
  </rewrite>
</system.webServer>

有关详细信息，请参阅Url rewrite for ASP.NET Web API SPA。