关于vue3打包后使用nginx代理后不访问接口

npm run build 后生成的产物要使用 /api/xxx 的形式访问接口的话，nginx 部分需要做反向代理配置

网上这样文章很多，随便找了一篇仅供参考：blog.csdn.net/shi851051279/article...

@wj2015 我之前也猜想过是这个原因 可是不是 我一般会把前端打包后放在后端项目内 通过/api 访问不同目录 在vue2项目中使用这种已经部署过几个项目了 但这次用vue3不知道为什么不可以

  if ( $request_uri !~* /api ) {
        set $root_path /var/www/admin_api/resources/dist;
    }

    if ( $request_uri ~* /(api|storage|\.well-known) ) {
        set $root_path /var/www/admin_api/public;
    }

@Latent 那么这次部署后，Chrome 的 Network 中看到请求的地址是 /api/xxx 这种形式的么？如果是的话，还是得排查 nginx 配置是否对这种情况做了转发。

@wj2015 如图 Network XHR 没有请求任何接口 所以我很奇怪

@Latent 这有点不太应该，请求部分怎么实现的呢，基于 axios 封装的么？我这边 v3 + ts + axios 的项目运行部署没有问题的。

@wj2015 没有对axios进行封装 我是直接引入的。

@Latent 确认已经执行这段代码了吧，我的实现跟这个也没多大差别，dev环境下会有 XHR 请求出现么？

@wj2015 dev下是正常的 打包后就是这种情况了

访问了下截图里的网站，没有部署的样子，不能直接调试排查，但从现象看暂时没想到其他的可能了

@wj2015 调整了一下nginx配置 现在可以看到了

@Latent 虽然有点没太明白这里用了 vuex 为啥还要再直接请求接口，不过调试结果表明，mounted 的逻辑没进去，可以尝试用 setup api 看打包出来的结果会不会有变化。

@wj2015 好的好的 部分是图方便所以是直接请求的接口 :joy:

@wj2015 找公司的前端大佬看了一下 是因为vue-router的问题 打包后路由失效没有走mounted逻辑