vue项目直接部署在tomcat的某一个项目下,如何配置nginx?

Question

前端用vue写的,用webpack打包后生成static文件夹和index.html,直接放在java项目的webapp目录下,

|--webapp

|--static
|--index.html
|--WEB-INF

这是目录结构,放在tomcat中,后端只写提供接口,不负责页面跳转,使用html5的history模式进行路由,但是nginx中不知道如何配置,以前java代码控制跳转配置如下:

server{ 
        listen 80;
        server_name www.xxx.com;
        access_log logs/app-vue.access.log combined;
        root /data/tomcat/webapps/app-vue;
        location /
        {  
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                #try_files $uri $uri/ /index.html; 
                proxy_pass http://127.0.0.1:8080/app-vue/;
        }
     }

这样导致如果刷新连接就会访问java后台的controller,简介导致404错误,看了官方文档需要nginx配置文件中添加

try_files $uri $uri/ /index.html; 

配置文件中注释掉的那一部分,但是配置之后,就无法访问了,nginx直接报500.

要如何配置才能达到效果?
先谢谢各位!

Answer 1

你应该把Nginx的静态根目录配置成你这个webapp的目录

Answer 2

问题应该是出在proxy_pass上，是我没有很好的理解proxy_pass,
我以前的配置：

location / {
 proxy_pass http://127.0.0.1/app-vue/;
}

当我在浏览器访问www.xxx.com/api/1xx/2xx方法的时候，我猜想location的/并没有替换app-vue，真正的访问路径是http://127.0.0.1/app-vue/1xx/...
然而我现在配置是：

location /api/ {
 proxy_pass http://127.0.0.1/app-vue/;
}

这样子当我再访问www.xxx.com/api/1xx/2xx方法的时候，由于代理给我替换了路径，真正的路径变成了http://127.0.0.1/api/1xx/2xx，然而再tomcat中的访问应该是http://127.0.0.1/app-vue/api/...，我现在最终的解决方案是：

location /api/ {
 proxy_pass http://127.0.0.1/app-vue/api/;
}

这样子就可以达到访问的地址www.xxx.com/api/1xx/2xx的时候，匹配到location中的/api/的时候，他就替换成了正确的地址。
--------------网上的资料------------
第三种：
location /proxy/ {

proxy_pass http://127.0.0.1/aaa/;

}
代理到URL：http://127.0.0.1/aaa/test.html

Answer 3

location / {
    root WEBAPPROOT;
}

可能存在权限问题显示403,修改权限即可