Nginx部署vue 静态项目 刷新404问题

之前写了一篇不是nginx部署vue静态项目的文章=>传送门
发现刷新的时候会出现404问题

之前的Nginx配置如下

server {
		listen       80;
		server_name  localhost;
		
		#charset koi8-r;
		
		#access_log  logs/host.access.log  main;
		
		location / {
		    root   D:/police/terminal-client; 
		    index  index.html index.htm;
		}

		location /api/ {
	    	proxy_pass      http://localhost:8888/;
            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;
        }
}

当业务进行的时候，url就会改变，如登录页面

• 入口url：http://localhost/
• 登录是的url：http://localhost/login

这个时候，刷新页面nginx就会给你个404

更改配置

增加配置 try_files $uri $uri/ /index.html;

location / {
   root   D:/police/terminal-client; 
   try_files $uri $uri/  /index.html;
   index  index.html index.htm;
}

try_files

以 try_files $uri $uri/ /index.html; 为例，当用户请求 http://localhost/login时，这里的 $uri 就是 /login。try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/login（其中 $root 是 WordPress 的安装目录）的文件，就直接把这个文件的内容发送给用户。显然，目录中没有叫 login的文件。然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/login/ 的目录。又找不到，就会 fall back 到 try_files 的最后一个选项 /index.html，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.html。