Vue打包发布Tomcat、Ngins，刷新报错404解决方法

 Ant Design Pro Vue 打包发布到Tomcat后，刷新报错404解决方法

 

 在应用下面加 WEB-INF 建 web.xml 内容如下

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">
 
  <display-name>Welcome to Tomcat</display-name>
  <description>
     Welcome to Tomcat
  </description>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

 

---

 

Nginx 解决方法

server {
        listen       8090; #后台管理
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {            
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;            
            root   D:/Web;
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
    }