如何使用PHP开发服务器将移动设备连接到Vite？（暴露主机）

Question

如何使用PHP开发服务器将移动设备连接到Vite？（暴露主机）

3

解决方法：

感谢@parastoo，现在它能够正常工作了。我需要这样启动开发服务器（使用2个不同的终端选项卡）：

vite --host=HOST_IP
php artisan serve --host=HOST_IP

然后连接您的移动设备（已连接到WiFi）以：

http://HOST_IP:PORT

HOST_IP 可以在运行 vite --host 命令时在终端中看到。

PORT 可以通过将 --port=8000 添加到 artisan 命令来配置。

不需要在 vite.config.js 中添加任何额外的条目。

原问题

我正在使用惯性，这是一种使用前端框架（如vue）和后端框架（如laravel）开发应用程序的单片式方法。我试图从我的网络上的移动设备连接到使用php server的开发服务器，它使用vite：

运行 vite：

vite

运行PHP服务器：

php artisan serve

该站点从 http://localhost:8000 提供服务。从如何公开外部设备显示的“主机”？#3396中了解到，您可以执行以下操作：

vite --host

这应该使您的网络暴露出来:

  vite v2.9.13 dev server running at:

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

  ready in 419ms.

但是当我尝试在手机上连接网络URL时，此页面无法找到。我还尝试使用端口8000连接，显示无法访问此网站。

有什么办法可以使它工作吗？

- Artur Müller Romanov

你需要在同一网络下才能使用，比如Wi-Fi。然后在手机上输入以192开头的本地IP地址（这里不需要隐藏），就可以使用了。如果你想从家外访问它，你需要使用公共IP地址，并在路由器上进行端口转发。 - kissu

你不需要这样做，因为它已经完成了。但是，如果你想尝试一个模块，你可以使用ngrok或者另一个类似的模块，我忘记了名字，但可以在modules.nuxtjs.org上找到。再次强调，在你的情况下可能并不需要。 - kissu

很难说，没有更多来自你那边的调试/信息。 - kissu

你能展示一下关于vite的配置吗？由于你是通过laravel进行服务，所以不需要运行vite服务器。你运行了npm吗？ - Umi Umi

1

请勿将答案编辑到问题中。如果您想自我回答，请“发布答案”。 - Quentin

显示剩余4条评论

5个回答

2

***澄清

在看了所有的答案后，我仍然无法弄清楚为什么热重载并不总是有效。因此，我想澄清一些步骤。

要让移动设备看到页面，它必须在以192.*.*.*（例如192.168.1.130）开头的本地网络上提供服务。

在第一个终端中

php artisan serve --host=192.168.1.130 --port=5173

现在，您应该可以使用 http://192.168.1.130:5173 从移动设备连接到服务器了。但是，热重载还没有生效。为此，让我们启动 Vite 开发服务器。

在第二个终端中

npm run dev -- --host=192.168.1.130

这将在同一网络上启动Vite开发服务器，但它将使用不同的端口（在我的情况下是5174），这很好，因为热重载按预期工作。

注意：如果您以相反的顺序运行命令，php artisan serve要么无法连接到相同的端口，要么即使连接成功，热重载也无法正常工作。

**

*** 提高工作流程（可选）

每次输入 --host 和 --port 命令时，我都感到很烦恼，因此我对 .ENV 和 package.json 文件进行了一些更改。

.ENV

SERVER_HOST=192.168.1.130
SERVER_PORT=5173

package.json

"scripts": {
    "dev": "vite --host=192.168.1.130",
},

现在要启动工作流程，只需打开两个终端并输入php artisan serve和npm run dev

- Armand

1

它也可以是192.168或10.0。这取决于您的本地网络。 - kissu

非常好用，谢谢！ - Tomas Hromnik

2

您的PHP终端正在运行localhost:8000

因此，您可以在主机上运行php artisan serve。

php artisan serve --host=192.XXXXXXXX

- swaroop suthar

连接似乎已经建立（php服务器在控制台中显示：2022-10-16 16:00:00 /favicon.ico ...... ~ 0s，但移动设备只显示白屏。我已经在Android和iPhone上进行了测试，两者都表现出相同的行为。） - Artur Müller Romanov

0

我建议使用Chrome浏览器，然后打开"切换设备工具栏" - F12和Ctr+Shift+M。

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

- raimondsL

两个设备都连接在同一个WiFi网络上，但仍无法正常工作。我不应该连接到8000端口（PHP）吗？ - Artur Müller Romanov

@ArturMüllerRomanov 首先要检查您的本地网络，找出您在网络上拥有什么。检查您的路由器或任何能够正确映射它的软件。然后当然，您需要连接到给定IP +端口上公开的软件。如果您试图访问运行在3000端口上的Vue应用程序，但只是到达IP，则不会有任何相关内容（在80端口上）。 - kissu

0

Vite 使用自己的开发服务器，所以你不能只使用 php artisan serve。你需要使用 Vite 开发服务器。 https://github.com/vitejs/vite#how-does-it-work 如果你想使用 php artisan serve，你可以按照上面链接中的说明操作。但是你需要在浏览器中使用 php 服务器，如 http://localhost:8000/。

- Sh_gosha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- parastoo · Accepted Answer

你应该连接到相同的网络，然后检查你的本地IP，并通过以下方式提供Laravel项目：

PHP artisan serve --host=xx.xx.xx.xx --port=xxxx

**你应该禁用防火墙**

已更新

将以下配置添加到你的vite.config.js文件中

   server: {
        host: true
      }

例如，这是我的配置文件：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

    export default defineConfig({
        plugins: [
            vue(),
            laravel({
                input: ['resources/js/app.js'],
                refresh: true,
            }),
        ],
        server: {
            host: true
          }
    });

然后运行这个命令，并添加你在Laravel中提供服务的主机：

npm run dev -- --host=xx.xx.xx.xx

这些命令应该与同一主机一起运行：

PHP artisan serve --host=xx.xx.xx.xx --port=xxxx
npm run dev -- --host=xx.xx.xx.xx