本文主要是介绍vue nginx部署 配置 解决href = ‘/login路由‘ 跳转404问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
示例场景
<a :href=this.repDownloadUrl>下载平台</a><a href="/join" target="_blank">入驻平台</a><a href="/index" target="_blank" class="btn_login" style="color:#fff">
nginx部署前后端项目，当a标签跳转指定路由页面时，前端访问跳转界面报错404，或者location.href = ‘/login’ 跳转报错404
解决方法
cd 至nginx文件中的conf文件
重点：在nginx.conf配置中加入
try_files $uri $uri/ /index.html;
详情nginx配置如下
#user nobody;
worker_processes 1;#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024;
}http {include 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 logs/access.log main;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;#gzip on;server {listen 80;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location / {# 打包vue的包路径地址root /file/dist;index index.html index.htm;# 防止路由跳转的404问题# 解决跳转页面 href = '/路由地址' 跳转404问题# 也可解决location.href = '/login' 跳转404问题try_files $uri $uri/ /index.html;}# 接口请求转发location ^~ /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://localhost:8090/;}#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}# HTTPS server##server {# listen 443 ssl;# server_name localhost;# ssl_certificate cert.pem;# ssl_certificate_key cert.key;# ssl_session_cache shared:SSL:1m;# ssl_session_timeout 5m;# ssl_ciphers HIGH:!aNULL:!MD5;# ssl_prefer_server_ciphers on;# location / {# root html;# index index.html index.htm;# }#}}
配置后重启nginx，访问跳转路径无报错404
这篇关于vue nginx部署 配置 解决href = ‘/login路由‘ 跳转404问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
