Angular 路由和 Nginx 重写问题答案

【问题标题】：Angular Routing & Nginx Re-write IssueAngular 路由和 Nginx 重写问题
【发布时间】：2018-10-26 19:51:36
【问题描述】：

我们正在 Nginx 上为即将启动的应用程序运行 Angular。 Angular 正在使用它的路由功能，所以默认情况下，如果要刷新页面，Nginx 会返回 404 错误，因为它找不到路由路径。

为了纠正这个问题，我们在 Nginx 配置中添加了以下部分：

location / {
                try_files $uri $uri/ /index.html?$args;
        }

这是有效的，如果您执行浏览器刷新，那么页面现在会部分加载。问题是各种资产的路径都被扭曲了。

例如，我们在站点上有一个名为 Account/Login 的路径，访问方式如下：

http://site.name/Account/Login

该页面有一个位于 assets 文件夹中的 CSS 文件。通常，当完全通过 Angular 路由访问页面时（即没有刷新重写），它会位于此处：

http://site.name/Assets/CSS/Login.css

我们发现，当页面被刷新和重写时，在加载时，资源路径会扭曲并变成：

http://site.name/Account/Login/Assets/CSS/Login.css

我怀疑这与 Nginx 无关，事实上，Angular 方面需要一些配置来指定如何引用路径，但我们对 Angular 还很陌生，所以不知道从哪里开始。

有什么想法吗？

【问题讨论】：

【解决方案1】：

在 Nginx 配置文件中这样尝试

   location / {
       index  index.html $yii_bootstrap;
       try_files $uri $uri/ /$yii_bootstrap?$args;
   }

【讨论】：