如果将 vite 与 php 开发服务器一起使用，如何将主机暴露给外部设备？答案

【问题标题】：How to connect mobile device to vite with php dev server? (exposing host)如果将 vite 与 php 开发服务器一起使用，如何将主机暴露给外部设备？
【发布时间】：2022-10-13 18:20:57
【问题描述】：

我正在使用惯性，这是一种以vue 和laravel 等前端框架作为后端开发应用程序的单一方法。我正在尝试将移动设备从我的网络连接到我的开发服务器，该服务器使用vite 和php server：

运行 vite：
```
vite
```
1. 运行php服务器：
```
php artisan serve
```
该网站由http://localhost:8000 提供服务。从How to expose 'host' for external device display? #3396 我读到，你可以这样做：
```
vite --host
```
这应该暴露你的网络：
```
  vite v2.9.13 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.xxxxxxxxx:3000/

  ready in 419ms.
```
但是当我尝试连接到手机上的网络 URL 时，this page can't be found。我还尝试连接显示this site can't be reached 的端口8000。

有什么办法让它工作吗？

【问题讨论】：

当我想查看页面在移动设备中的外观时，我只需将npm run dev 替换为npm run build，而不更改php artisan serve。但我想有一种方法可以将前端作为开发模式运行。
我可以运行vite build，但我不知道如何将设备连接到 php 服务器
你需要在同一个网络上才能工作，比如wifi。然后你在手机上输入以192开头的本地IP地址（顺便说一句，你不需要在这里隐藏），应该没问题。如果您想从家外访问它，则需要使用公共 IP 地址并使用路由器进行一些端口转发。
替代方法是ngrok.com 安装后，运行ngrok http 8000 命令，该服务将为您创建一个临时公共地址
你不需要这样做，因为它已经完成了。但是，是的，如果你想尝试使用一个模块，你可以使用 ngrok 或另一个类似的，忘记名称但可以在 modules.nuxtjs.org 上找到它。同样，在您的情况下可能不需要。

标签： laravel vue.js localhost vite inertiajs

【解决方案1】：

我建议使用 Chrome 并仅使用“切换设备工具栏” - F12 和 Ctrl+Shift+M

或者两台设备应该在同一个网络上，并检查防火墙是否允许连接 3000 端口；

【讨论】：

两个设备都在同一个wifi网络上，仍然无法正常工作。我不应该连接到端口8000 (php) 吗？
@ArturMüllerRomanov 第一步是检查您的本地网络，以了解您的网络上有什么。检查您的路由器或任何能够正确映射它的软件。然后，当然，您需要连接到在给定 IP + 端口上公开的软件。如果您尝试访问在端口 3000 上运行的 Vue 应用程序但只是访问 IP，那么您将没有任何相关内容（在端口 80 上）。

【解决方案2】：

您的 php 终端正在运行本地主机：8000

所以你可以在 php artisan serve 上运行主机。

php artisan serve --host=192.XXXXXXXX

【讨论】：