vue項(xiàng)目直接部署在tomcat的某一個(gè)項(xiàng)目下,如何配置nginx?

前端用vue寫的,用webpack打包后生成static文件夾和index.html,直接放在java項(xiàng)目的webapp目錄下,

|--webapp

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

這是目錄結(jié)構(gòu),放在tomcat中,后端只寫提供接口,不負(fù)責(zé)頁面跳轉(zhuǎn),使用html5的history模式進(jìn)行路由,但是nginx中不知道如何配置,以前java代碼控制跳轉(zhuǎn)配置如下:

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

這樣導(dǎo)致如果刷新連接就會(huì)訪問java后臺(tái)的controller,簡介導(dǎo)致404錯(cuò)誤,看了官方文檔需要nginx配置文件中添加

try_files $uri $uri/ /index.html;

配置文件中注釋掉的那一部分,但是配置之后,就無法訪問了,nginx直接報(bào)500.

要如何配置才能達(dá)到效果?
先謝謝各位!

回答

編輯回答

我以為

你應(yīng)該把Nginx的靜態(tài)根目錄配置成你這個(gè)webapp的目錄

2017年2月27日 15:40

編輯回答

怪痞

問題應(yīng)該是出在proxy_pass上，是我沒有很好的理解proxy_pass,
我以前的配置：

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

當(dāng)我在瀏覽器訪問www.xxx.com/api/1xx/2xx方法的時(shí)候，我猜想location的/并沒有替換app-vue，真正的訪問路徑是http://127.0.0.1/app-vue/1xx/...
然而我現(xiàn)在配置是：

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

這樣子當(dāng)我再訪問www.xxx.com/api/1xx/2xx方法的時(shí)候，由于代理給我替換了路徑，真正的路徑變成了http://127.0.0.1/api/1xx/2xx，然而再tomcat中的訪問應(yīng)該是http://127.0.0.1/app-vue/api/...，我現(xiàn)在最終的解決方案是：

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

這樣子就可以達(dá)到訪問的地址www.xxx.com/api/1xx/2xx的時(shí)候，匹配到location中的/api/的時(shí)候，他就替換成了正確的地址。
--------------網(wǎng)上的資料------------
第三種：
location /proxy/ {