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


vue.config.js 文件没有配置 然后使用

npm run build

目前完全没有头绪~求助

不成大牛,不改個簽
最佳答案

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

file

2周前 评论
讨论数量: 13

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

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

2周前 评论

@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;
    }
2周前 评论

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

2周前 评论

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

2周前 评论

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

2周前 评论

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

file

2周前 评论

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

2周前 评论

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

2周前 评论

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

file

2周前 评论

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

2周前 评论

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

file

2周前 评论

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

2周前 评论

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

2周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!