Nginx下部署vue项目访问地址报404以及500错误

部署项目访问接口报404

vue中使用的是vue-router跳转的，如果跳到二级菜单，刷新页面的话会出现404页面。这是因为在vue中使用的是js渲染的虚拟目录，而在nginx配置中并没有实际的资源，所有会出现404。
可在nginx.conf文件添加如下配置

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;
}