使用Nginx转发至Vite的本地环境项目时遇到了main.js请求路径错误的问题

Question

使用Nginx转发至Vite的本地环境项目时遇到了main.js请求路径错误的问题

我在公司的开发网段环境开发移动端app的vue3 h5项目，因为需要调用APP原生插件调试，所以我需要将用测试机访问这个项目，但公司测试机使用的网络和我的开发机不是一个网段的。但开发网段服务器开放了域名，允许测试机访问。因此我在服务器的nginx配置反向代理转发到了我的内网环境的开发机上。
大概是这样的，公司开放的域名是abc.com。我在nginx的/local 上配置了/why/bhc 转发到我的开发机 10.99.99.1:9880上。然后我的vite项目在启动时（使用npm run dev运行项目），测试机访问abc.com/local/why/bhc的时候，默认会请求我的开发机
http://10.99.99.1:9880/
其中index.html正常访问。

此时预览到的index.html里的所有script标签都是esmodule标签，是直接写的目录。

此时其余资源的请求全是有问题的，因为nginx没有帮忙转发src/main.js、@vite/client 这些资源。

我的vite配置比较简单，base为“./” root为"./" ，路由用的hash模式。
如果我需要使用nginx转发src/main.js的话，那相当于每次开发的时候，整个真机测试环境只能被一个人占用使用，不太方便。怎么解决es模块下的src/main.js这些文件在nginx的解析问题？

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

根据您描述的情况，问题出在Nginx没有正确转发您的Vite项目中的ES模块资源路径。当Nginx转发请求到您的开发机时，它没有正确处理路径中的相对路径和绝对路径之间的转换。因此，当浏览器尝试加载/src/main.js等资源时，Nginx无法正确转发这些请求到您的开发机上的相应资源。要解决这个问题，您可以通过修改Nginx配置来确保请求正确转发到您的Vite项目的相应路径。

一种解决方案是使用Nginx的proxy_pass指令来设置正确的代理路径。您可以尝试在Nginx配置中添加一个location块来匹配您的Vite项目的路径，并在该块中使用proxy_pass指令将请求转发到您的开发机的对应路径。这样可以确保资源路径正确转换，从而解决问题。

下面是一个示例的Nginx配置片段，您可以根据您的实际情况进行修改：

location /why/bhc/ {
    proxy_pass http://localhost:你的开发机端口号/; # 将localhost替换为你的开发机的IP地址或域名
}

请确保将上述配置片段添加到Nginx配置文件的适当位置，并根据您的实际需求进行调整。此外，确保您的Nginx服务器已正确配置并重启以使配置生效。

通过这种方式配置Nginx后，当测试机访问abc.com/local/why/bhc时，Nginx会将请求正确地转发到您的开发机的对应路径上，从而解决资源路径错误的问题。这样，您的测试机就可以正常访问Vite项目中的资源了。