Vue项目打包在nginx容器中正确配置代理的方式

起因

在做项目时打包前端部署docker容器后，无论怎么配置容器内的nginx代理default.conf文件，就是无法请求到后端的接口。

后来我在修改了前端的.env.production

把图中的localhost改成了服务器的ip之后再打包发布，竟然就可以了。

但是问题也就出现了，如果我要部署不同的服务器，难道我还要每次都在代码里修改一下ip之后再打包部署不成？

首先我先贴一下我的nginx配置default.conf

图中的红色打码部分就是我所要跳转的后端服务地址。

配置文件并没有什么问题，但是实在容器内部的，所以如果我在.env.production文件中写上localhost，访问的前端则只是浏览器运行所在的服务器。

可以通过浏览器f12看到请求的地址

那么该如何修改呢？

我索性就把.env.production文件里的地址删了，然后打包发布，看看效果。

果然，走了容器中的nginx代理，请求到了后端。

原来.env.production文件可以不写，这样在build打包之后请求的便是服务器宿主机的ip地址，这样nginx的代理便能生效了。

需要注意的是，我的前端是封装了axios，设置了baseUrl，也就是在请求地址端口后面的那层根路径。

这个路径需要与nginx配置的location一致，不然nginx肯定是无法代理到的。

nginx配置的default.conf文件可以在我的github上找到