react 项目 nginx配置问题

Question

在使用nginx 配置前后端分离项目的时候出现了一个问题，前端是用react做的，路由用的是history模式的。 nginx配置如下：

server {
    listen    8000;
    server_name   test;
    charset utf-8,gbk;
    location / {
        root /opt/web/test1;
        #index index.html index.htm;
        try_files $uri /index.html;
    }

    location /v1/ {
        proxy_pass http://127.0.0.1:8001/xxx/v1/;
    }
}

在配置之后可以访问到前端页面，但是ajax请求中的路径会多出一级目录，规则如下：

//url路径
http://localhost:3000/bill/query 
// 请求路径就会多出一个 /bill 如下：
http://localhost:3000/bill/v1/xxx/xxx/list 
// 我希望的请求路径是
http://localhost:3000/v1/xxx/xxx/list 

同理 如果我的url地址是 http://localhost:3000/test/query ，请求的路径就会变成http://localhost:3000/test/xxx/xxx/list.

当我把react中的路由变成hash模式的时候请求就没问题了，也就是将nginx配置中的 try_files $uri /index.html;去掉。
哪位大佬知道原因吗，万分感谢?。

Answer 1

原因是你在项目中配置url的时候写成相对路径了。
应该在url前加一个 /,如下：

fetch('/vi/xxx/xxx/list');

Answer 2

打包的时候，配置一下publicPath