vue项目部署后，二级路由刷新业务报404

喜欢ヅ旅行 2022-12-27 06:28 325阅读 0赞

### 1、现象 ###

*  我是前后端分离开发，前端采用的是vue+Element+axios;用的vue-cli脚手架创建的项目架构。
 *  在开发环境上已经可以正常运行；
 *  采用npm run build 进行运行打包，生成dist文件，使用nginx反向代理服务器进行部署（为了解决跨域问题）；
 *  部署后，程序运行正常，例如我访问http://localhost:8080/home 是可以正常访问的
 *  当我从左侧菜单通过vue router进行跳转后，浏览器地址栏的地址变成立我指定的路由地址：例如http://localhost:8080/home/base,这个时候也正常；
 *  在上面的基础上，当我再次使用浏览器的刷新，或者直接F5后，界面直接404

### 2、解决办法 ###

修改nginx的配置文件，在server块中做如下处理

server {
            listen       8080;
            server_name  localhost;
    		root   D:\vueBuild\dist\myproject; #注意这个路径一定指导index.html的路径
    		index  index.html;
    
            #charset koi8-r;
    
            #access_log  logs/syzz.log  main;
    
            location / {
                 try_files $uri $uri/ @router;
                 index index.html;
            }
             #配置代理路径 /ceshi  这个根据你实际的代理路径进行替换
    	location /sjapi {
                proxy_pass   http://localhost:8081/server; #代理地址，根据实际替换
                #index  index.html index.htm;
            }
    	location @router {
                #rewrite ^.*$ /index.html last;
    	    rewrite ^.+(?<!js|css|png|map)$ /index.html break;
            }
    #......后面的内容就不贴了，nginx默认的配置