前后端分离项目中在本地部署时,如果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;
}