鉴于公司的网络代理比较复杂。而且开发的移动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时的路由是 www.xxx.com/a/b/c ,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资源时 www.xxx.com/xxx,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;
}
}