当前位置: 首页 → 爱前端 → 

JavaScript

Angular支持BrowserHistory的配置

 

Angular应用默认采用HashHistory方式进行路由,若要支持“伪多页”的BrowserHistory方式,需要结合Nginx的配置。

过程如下:

1、在路由设置中,修改路由配置

RouterModule.forRoot(routes, {
  useHash: false
})

2、配置Nginx

server {
    listen 80;
    server_name www.app.com;
    location / {
        proxy_pass https://cdn.com/path/index.html;
    }
    location /cdn/ {
        proxy_pass https://cdn.com/path/index.html;
        try_files $uri $uri/ /;
    }
    location ~* /cdn/(.+\..+$) {
        proxy_pass https://cdn.com/path/$1;
    }
    location /api/ {
        proxy_set_header Host www.app.com;
        proxy_pass http://server.app.com/api/;
    }
}

3、绑定Hosts

www.app.com 127.0.0.1

4、重启nginx

访问www.app.com即可看到效果。

注:

  1. base设置为“/”;
  2. 替换nginx配置中的www.app.comcdn.com/pathserver.app.com为实际的域名、路径。
🔚
 

*

*

*

*