nginx 配置 vue (history模式) 项目

vue中有两种模式

history模式(访问地址中包含 /#/ ),有的场景下(例如官网),访问地址出现该路径会比较难看,需要优化,需要切换到另外一种模式,但是nginx需要配置一下,不然刷新页面会出现404

server {
listen 8075;
server_name localhost;
root /home/vol1/zenuo_html;
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html ;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
#location / {
# root /home/vol1/zenuo_html;
# index index.html;
# proxy_pass http://192.168.111.20:8081;
# }
location /announcement {
proxy_pass http://127.0.0.1:8081;
proxy_set_header Host $remote_addr;
proxy_connect_timeout 15s;
proxy_send_timeout 15s;
proxy_read_timeout 15s;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}
}

posted @ 2019-11-08 09:49  向之礼  阅读(1216)  评论(0编辑  收藏  举报