vue nginx部署配置解决href = ‘/login路由‘ 跳转404问题

server/2024/9/23 1:02:44/

示例场景

在这里插入图片描述

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