使用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