时间戳

首页 > 解决方案 > Angular 路由和 Nginx 重写问题

angular - Angular 路由和 Nginx 重写问题

问题描述

我们正在为即将启动的应用程序在 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 还是很陌生，所以不知道从哪里开始。

有任何想法吗？

标签： angularnginx

解决方案

在 Nginx 配置文件中尝试这样

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

推荐阅读