鉴于公司的网络代理比较复杂。而且开发的移动SPA程序需要在金蝶轻应用和微信端使用。故选择了router的history模式。

然而在实际的配置中是比较棘手，即有如下两个问题：

1、404重定向路由到/index.html

2、轻应用的nginx代理转发到SPA程序的nginx

SPA程序的nginx配置如下：

server{    listen      8011;    server_name localhost;    location /image{        alias   E:/data/erp/vote/image;    }    location /api{            proxy_pass http://127.0.0.1:8080/app;            proxy_redirect          off;            proxy_set_header        Host $host;            proxy_set_header        X-Real-IP $remote_addr;            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;            proxy_connect_timeout   600;            proxy_send_timeout     600;             proxy_read_timeout     600;    }    location /erp_vote/api{            proxy_pass http://127.0.0.1:8080/app;            proxy_redirect          off;            proxy_set_header        Host $host;            proxy_set_header        X-Real-IP $remote_addr;            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;            proxy_connect_timeout   600;            proxy_send_timeout     600;             proxy_read_timeout     600;    }    location /erp_vote/file{        alias   E:/data/erp/vote/file;    }    location /erp_vote/image{        alias   E:/data/erp/vote/image;    }    #转发所有以erp_vote开头的路径    location ^~ /erp_vote{        rewrite ^/erp_vote(.*) /$1 last;    }    #一定要放在最后面    location /{        root    E:/data/dist;        index   index.html;        if (!-e $request_filename) {            rewrite ^/(.*)$ /index.html last;            break;        }    }}

 

引用简书的如下：

 

vue-router 或者 react-router 路由模式有两种，一种是使用hash来控制视图的跳转。另一种是使用 history 模式，使用 history.pushState API 来控制视图的跳转。使用 hash 的缺点是路由的样子会是 #/a/b 这种样子，而且在微信分享时会出现问题。所以推荐使用history模式的路由。

使用history模式的服务端支持

由于使用history时的路由是 ，url 是指向真实 url 的资源路径。因此回去服务端查询该资源。往往资源是不存在的于是就会报404。下面以 ngixn 为例修改 nginx 配置以支持history路由。

nginx 整体配置

原始配置

server {    listen       80;    server_name  localhost;    #charset koi8-r;    #access_log  /var/log/nginx/log/host.access.log  main;    location ~ ^/api {        proxy_pass http://xxx.com:3000;    }    location / {        root /xxx/dist;        index  index.html index.htm;    }

修改后的配置

server {    listen       80;    server_name  localhost;    #charset koi8-r;    #access_log  /var/log/nginx/log/host.access.log  main;    location ~ ^/api {        proxy_pass http://xxx.com:3000;    }    location / {        root /xxx/dist;        index  index.html index.htm;        try_files $uri $uri/ @rewrites;        }    location @rewrites {         rewrite ^(.+)$ /index.html last;    }

配置详解

由修改看出nginx此次修改，主要增加了

location / {        try_files $uri $uri/ @rewrites;        }

try_files 是指当用户请求url资源时 ，try_files 会到硬盘资源根目录里找 xxx。如果存在名为 xxx 的文件就返回，如果找不到在找名为 xxx 的目录，再找不到就会执行@rewrites。（$uri指找文件， $uri/指找目录）

location @rewrites {         rewrite ^(.+)$ /index.html last;    }

rewrite是nginx中的重定向指令。^(.+)$ 是重定向规则。/index.html重定向路径。

作者：岁月如同马匹 链接：https://www.jianshu.com/p/0a9077d8714d 來源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

 

结合简书的写法：

server {	listen     80;	server_name erp.xxx.com;	access_log  logs/access.erp.xxx.com.log;	error_log logs/error.erp.xxx.com.log;##PC端	location /vote {		alias    /web/project/erp.xxx.root/front;		index   index.html;	}	location /vote/image {		alias   /data/erp/vote/image;	}	location /vote/file {		alias    /data/erp/vote/file;	}##移动端	location /voteApp/api{		proxy_pass http://127.0.0.1:8084/app;		proxy_redirect          off;		proxy_set_header        Host $host;		proxy_set_header        X-Real-IP $remote_addr;		proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;		proxy_connect_timeout   600;		proxy_send_timeout     600;		proxy_read_timeout     600;	}	location /voteApp/file {		alias   /data/erp/vote/file;	}	location /voteApp/image {		alias   /data/erp/vote/image;	}	location /voteApp {		root    /web/project/erp.xxx.root/appFront;		index   index.html;		try_files $uri $uri/ @rewrites;	}	location @rewrites {		rewrite ^(.+)$ /voteApp/index.html last;	}}