如何配置Nginx以使用html5mode

时间:2016-12-13 01:48:30

标签: angularjs nginx

对于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;
    }
}

1 个答案:

答案 0 :(得分:5)

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

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