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;

}

}