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