Mobilgerät über PHP-Entwicklungsserver mit Vite verbinden: Host freigeben

Question

Lösung:

Dank @parastoo funktioniert es jetzt. Ich muss den Entwicklungsserver so starten (2 verschiedene Terminal-Registerkarten):

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

Dann verbinden Sie Ihr Mobilgerät (mit Ihrem WLAN verbunden) mit:

http://HOST_IP:PORT

HOST_IP kann im Terminal angezeigt werden, wenn vite --host

ausgeführt wird

PORT kann durch Hinzufügen von --port=8000 zum Handwerkerbefehl konfiguriert werden.

Es müssen keine Einträge in vite.config.js hinzugefügt werden.

Ursprüngliche Frage

Ich verwende Inertia, einen ganzheitlichen Ansatz zur Entwicklung von Projekten mit Front-End-Frameworks wie vue 和 laravel 作为后端）的应用程序。我正在尝试将移动设备从我的网络连接到我的开发服务器，该服务器使用 vite 和 php server:

1. Run vite:

vite

2. PHP-Server ausführen:

php artisan serve

Diese Seite wird betrieben von http://localhost:8000. Von Wie kann „Host“ für die Anzeige durch externe Geräte verfügbar gemacht werden? #3396 Ich habe gelesen, dass man so etwas machen kann:

vite --host

Dies sollte Ihr Netzwerk offenlegen:

vite v2.9.13 dev server running at:

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

  ready in 419ms.

Aber wenn ich versuche, die Netzwerk-URL auf meinem Telefon zu verbinden, wird sie nicht gefunden这个页面。我还尝试连接端口 8000，这显示 此站点无法访问.

Gibt es eine Möglichkeit, es zum Laufen zu bringen?

Answer 1

您的 php 终端正在 localhost:8000 上运行

这样你就可以在主机上运行 php artisanserve 了。

php artisan serve --host=192.XXXXXXXX

Answer 2

您应该连接到同一网络，然后检查您的本地 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