Vue-router路由使用history模式的nginx配置

前后端分离项目中在本地部署时，如果Vue中路由配置修改为history模式，如下：

export default new Router({
     
    mode: 'history',
  	routes: [...]
  	...
})

本地如果改成history模式是不会出现问题的，如果放到线上环境下通过nginx代理转发，则会出现重新刷新后报404问题，那么则需要在nginx配置nginx.config中添加以下配置：

server {
     
		listen80;
		server_name  localhost;
		
		location / {
     
				add_header Access-Control-Allow-Origin *;
				add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
				add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
				if ($request_method = 'OPTIONS') {
     
					return 204;
				}
				#项目路径
				root /usr/local/project/dist/;
				index  index.html index.htm;
				# 以下是添加的配置
				if (!-e $request_filename) {
     
		        	rewrite ^/(.*) /index.html last;
		            break;
		        }
		}
		...
}

亲测有效
以下是官方配置

location / {
     
  try_files $uri $uri/ /index.html;
}