如何通过本地网络用LiveServer/npm run dev启动项目并跨设备预览？

使用LiveServer实现局域网访问 #

• VS Code插件版：打开设置（快捷键Ctrl+,），搜索Live Server: Host，将值设为0.0.0.0，启动后服务会绑定本机所有网络接口。
• 全局包版（需先执行npm install -g live-server安装）：启动时运行命令 live-server --host=0.0.0.0
• 获取本机局域网IP（Windows用ipconfig，Mac/Linux用ifconfig或ip addr），比如192.168.1.100，局域网设备访问 http://[你的IP]:5500 即可（LiveServer默认端口为5500）。

使用npm run dev/start实现局域网访问 #

不同前端框架的配置核心是让开发服务器绑定0.0.0.0，具体操作如下：

• Vite项目：直接执行 vite --host 0.0.0.0，或在vite.config.js中添加配置：

  export default {
    server: { host: '0.0.0.0' }
  }
  

  之后正常运行npm run dev即可。
• Vue CLI项目：在vue.config.js中配置：

  module.exports = {
    devServer: { host: '0.0.0.0' }
  }
  

• Create React App项目：修改package.json的启动命令：
  • Mac/Linux环境："start": "HOST=0.0.0.0 react-scripts start"
  • Windows环境："start": "set HOST=0.0.0.0 && react-scripts start"
• 启动后用本机局域网IP+对应端口（比如React默认3000，Vite默认5173）访问，格式为http://[你的IP]:[端口号]。

局域网设备实时预览说明 #

无需部署，同一家庭WiFi下的iPad、手机、iMac等设备完全可以实时预览开发中的项目：

• 确保所有设备连接同一无线网络，且本机防火墙未拦截开发服务器使用的端口。
• 代码修改保存后，开发服务器会自动触发热更新，所有访问设备的页面会实时同步变化，无需手动刷新。

内容的提问来源于stack exchange，提问作者Michael Martell