如何配置Nginx以使用html5mode

Question

对于angularjs中的干净网址，我必须使用$locationProvider.html5Mode(true);但是当我刷新我的页面时它会显示404。

我已经读过我需要配置服务器文件。

结构体

 /html -
 /views -
   home.html
   about.html
   contact.html
 index.html
 app.js

到目前为止我做了什么：

nginx.conf

server {
    root /html/views;
    index index.html;

    location / {
    try_files $uri $uri/ =404;
    }
}

Answer 1

Angular HTML5位置模式基本上利用HTML5历史API来“模拟”客户端中的URL更改。但是从服务器的角度来看，URL可能并不真实（不存在），因此无法在服务器上找到这些页面。通常有两种解决方案可以让服务器知道URL：

1. 使用服务器端呈现。这被另一个名为ReactJS的框架广泛使用。实际上，AngularJS 2.0也可以在服务器上运行。因此，可以生成服务器端的实际页面并将其提供给客户端。
2. 使用HTTP服务器重写技术。这就是你要做的。我们的想法是将所有相关请求转发到单个AngularJS入口点HTML页面，通常是来自根目录的index.html。

对于您的情况，假设AngularJS的入口点是/index.html。试试这个：

server {
    root /html/views;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

以前的解决方案并不完美，因为它会任意测试每个请求。我们可以通过指定更详细的规则来避免不必要的URL查找：

server {
    root /html/views;
    index index.html;

    rewrite "^/users" /index.html last;
    rewrite "^/pages" /index.html last;
    ...
}

使用正则表达式匹配要与Angular一起提供的URL。