Nginx下部署vue项⽬访问地址报404以及500错误
Nginx下部署vue项⽬访问地址报404以及500错误nginx 配置文件
部署项⽬访问接⼝报404
vue中使⽤的是vue-router跳转的，如果跳到⼆级菜单，刷新页⾯的话会出现404页⾯。这是因为在vue中使⽤的是js渲染的虚拟⽬录，⽽在nginx配置中并没有实际的资源，所有会出现404。
可在f⽂件添加如下配置
location /{
#这⼀句配置会导致500错误，下⾯有更正
root  /html;
index  index.html index.htm;
#下⾯这⼀句是重点，意思就是将地址都导向index.html
try_files $uri $uri//index.html;
}
部署项⽬访问接⼝报500
查看nginx⽇志发现如下错误
[error]14732#18660:*12 rewrite or internal redirection cycle while internally redirecting to"/index.html", client:127.0.0.1, server:127.0.0.1, request:"GET / test/mainPage HTTP/1.1", host:"127.0.0.1:9090"
该错误是因为nginx配置导致的，使⽤nginx -t检测不出来。错误原因就是index.html循环重定向，我遇到的这个错是因为使⽤了nginx⽂件夹下的html⽂件夹作为root⽬录。将root⽬录移动到nginx⽂件夹外就可以了，⽐如放到D盘根⽬录，更正后的配置如下
location /{
root  D:/html;
index  index.html index.htm;
#下⾯这⼀句是重点，意思就是将地址都导向index.html
try_files $uri $uri//index.html;
}
nginx 配置代理websocket
在http的范围下添加如下代码
http{
......
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
}
然后在你需要代理的websocket的location范围下添加如下代码
location /ws {
......
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。