使用php開發伺服器將行動裝置連接到vite：暴露主機

Question

解決方案：

感謝@parastoo，它現在可以工作了。我必須像這樣啟動開發伺服器（2 個不同的終端選項卡）：

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

然後連接您的行動裝置（已連接到您的 WiFi）以：

http://HOST_IP:PORT

HOST_IP 可以在執行 vite --host 時在終端機中看到

PORT可以透過在 artisan 指令中加入 --port=8000 來設定。

不需要在 vite.config.js 中新增任何項目。

原始問題

我正在使用慣性，一種整體方法來開發具有前端框架（如 vue 和 laravel 作為後端）的應用程式。我正在嘗試將行動裝置從我的網路連接到我的開發伺服器，該伺服器使用 vite 和 php server:

1. 運行 vite：

vite

2. run php server:

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，這顯示 此網站無法存取。

有什麼辦法讓它發揮作用嗎？

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