使用Vue开发,配置history路由模式刷新出现404,Nginx详细配置解决办法(包括https配置,代理配置等等,服务器配置)
前端代码如下:
const router = new VueRouter({ mode:'history', //路由模式 routes, linkActiveClass: 'active', //菜单被激活时的样式 })
在部署上服务器的时候,就会出现刷新404问题。
实际上这个问题是可以在nginx配置的时候解决的。
以下是nginx详细配置:
user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #gzip on; upstream myBackServer{ server 127.0.0.1:8089; keepalive 32; } server{ listen 80; server_name your-domain-name; #把http的域名请求转发到https return 301 https://$host$request_uri; } server{ listen 443 ssl; server_name your-domain-name; #ssl on; ssl_certificate /etc/nginx/certs/your-domain-name.crt; ssl_certificate_key /etc/nginx/certs/your-domain-name.key; ssl_session_timeout 5m; ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; ssl_prefer_server_ciphers on; root /usr/share/nginx/html; index index.html index.htm; location / { try_files $uri $uri/ /index.html } location /api { proxy_pass http://myBackServer; } } include /etc/nginx/conf.d/*.conf; }
注意:这里边有https证书配置,记得把证书上传到/etc/nginx/certs路径下,
以上就是完整配置nginx文件,记得把your-domain-name换成你的域名,配置后重启nginx服务器即可。
文章评论