如何在手机上打开 Vite 开发服务器

介绍

开发能够在多种设备上无缝运行的 Web 应用是现代 Web 开发的关键环节。作为开发者，您可能经常需要在不同的设备和屏幕尺寸上测试您的 Web 应用，以确保其兼容性和响应能力。然而，手动在各种设备上测试您的 Web 应用可能既耗时又繁琐。

幸运的是，有一些工具和技术可以帮助您简化此过程。其中一种技术是在移动设备上打开 Vite 开发服务器，这样您就可以快速轻松地在智能手机或平板电脑上测试 Web 应用程序。本文将指导您完成在移动设备上打开 Vite 开发服务器的步骤，以便您可以随时随地测试 Web 应用程序。

让您的计算机和移动设备处于同一网络

要在移动设备上打开 Vite 开发服务器，您的电脑和移动设备需要连接到同一网络。这可以是 Wi-Fi 网络或有线网络。在继续操作之前，请确保两台设备都连接到同一网络。

获取计算机的 IP 地址

接下来，您需要获取计算机的 IP 地址。

在Windows上，打开 powershell 并输入以下命令

   ipconfig | findstr IPv4

在Mac上，打开终端并输入以下命令

   ipconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}'

在Linux上，打开终端并输入以下命令

   hostname -I | awk '{print $1}'

查找以“IPv4 地址”开头的行并记下 IP 地址。

--host使用选项启动 Vite 开发服务器

默认情况下，Vite 开发服务器仅绑定到 localhost，这意味着它无法从网络上的其他设备访问。要允许从其他设备访问，您需要使用 --host 选项启动服务器并指定您计算机的 IP 地址。

打开package.json您的项目并转到脚本键。在脚本中更改"dev" : "vite"为"dev" : "vite --host"。

进行必要的更改后，您的脚本键应该类似于此👇

注意：
如果您只想在手机上打开一次 vite dev 服务器，您可以使用以下命令

    npm run dev -- --host

在移动设备上访问 Vite 开发服务器

现在 Vite 开发服务器已使用 --host 选项运行，您可以在移动设备上访问它。在移动设备上打开浏览器并输入 URL：

   http://<YOUR_COMPUTER'S_IP>:<YOUR_DEV_SERVER_PORT_NUMBER>

将 YOUR_COMPUTER'S_IP 替换为您在步骤 2中记下的 IPv4 地址。

将 YOUR_DEV_SERVER_PORT_NUMBER 替换为您在vite 配置文件中定义的端口号。如果您没有明确定义端口号，则默认为5173。

Bonus Tip
Vite 在终端本身显示您需要的 url。

现在，您应该会看到相同的 Vite 开发服务器正在移动设备上运行。您可以像在计算机上一样与其进行交互。

结论

在移动设备上打开 Vite 开发服务器，可以快速轻松地测试您的应用在不同设备和屏幕尺寸上的运行情况。按照本博文中概述的步骤，您可以轻松地在移动设备上访问 Vite 开发服务器，并随时随地测试您的应用。

希望这篇文章对你有用！
想知道如何构建类似 Google 设计的导航栏吗？点击此处了解详情。

如果您喜欢阅读这篇文章并希望保持联系，请务必查看我的Linktree。

快乐黑客