javascript - 即使更改网络，如何始终通过网络连接到本地服务器？

Question

背景

我有一个项目，其前端在 Node 上运行。当我在本地启动服务器时，我得到这个...

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.183:8080/

但根据我所连接的网络，该网络地址显然会发生变化。

为了与后端通信，我目前使用环境变量 VUE_APP_BACKEND_SERVER='http://192.168.1.183:3000'，但每次本地调用时我都必须更改该变量地址更改。

我尝试过的

我尝试使用静态 IP 连接到网络，但是当我运行服务器时，它在 App running at... 消息中仍然具有相同的地址。我可以通过运行服务器的计算机上的浏览器访问 http://stat.IP.add.ress:8080，但在连接到网络的任何其他设备上运行不起作用(只能通过消息中的地址连接)

有没有办法...

• 使该静态 IP 可供网络上的其他设备访问吗？ 或
• 以某种方式在 Javascript 中访问服务器网络地址，以便我可以连接到 ${networkAddress}:3000 ？

注意

这仅供本地开发使用，我不需要能够捕获访问生产版本的用户的 IP 地址的解决方案。

Answer 1

以下是您在开发过程中对此要做的事情。

1. 从具有后端的同一服务器为您的 Vue 应用程序提供 html。

2. 使用相对 URL 加载 Vue 应用程序 javascript，例如 src="/path/to/vueapp.js"浏览器将访问同一服务器。

3. 当您想要运行开发中的 Vue 应用程序时，可以通过将该服务器的 URL 放入浏览器地址栏中来访问它。 https://localhost:3000 是您在本地计算机上访问它的方式。

然后，当您准备好上线时，将服务器代码放在 DNS 中具有主机名的计算机上(假设为 myvue.example.com)。然后使用 http://myvue.example.com:3000 访问它。

此外，在发布过程中，您需要弄清楚如何使用 https。一个答案太多了。

tl;dr 让您的 html 和 vue 应用程序运行在同一服务器上，并使用同一服务器上的相对 URL 加载 vue 应用程序。