好的,下面是对Vue 3 + Vite 设置局域网访问的步骤,附上相应的参考资料出站链接


✅ Vite 项目(Vue 3 + Vite)

步骤

  1. 修改 package.jsondev 脚本
    打开 package.json 文件,找到 scripts 部分,将 dev 脚本修改为: "scripts": { "dev": "vite --host" } 或者指定所有接口: "dev": "vite --host 0.0.0.0" 参考:Vite Discussions: Expose local instance to the network
  2. 修改 vite.config.js
    vite.config.js(或 vite.config.ts)中添加如下配置: export default defineConfig({ server: { host: true, port: 3000 // 可选:设置端口号 } }); 参考:Amit Merchant: Expose Vite to the network
  3. 启动服务
    在终端运行以下命令启动服务: npm run dev 你会在终端看到类似:“Network: http://192.168.x.y:3000” 的提示。
    参考:Dev.to: How to expose Vite local instance to the network
  4. 手机访问
    在手机或其他设备上,确保与开发机器处于同一局域网(WiFi),然后在浏览器中输入 http://你的电脑IP地址:端口号,例如 http://192.168.1.12:3000
    参考:Reddit: How to share VueJS dev server on Wi-Fi network

注意事项


🔧 Vue CLI 项目(如果使用 Vue CLI 而非 Vite)

如果你的项目使用的是 Vue CLI,可以通过修改 vue.config.js 配置文件实现局域网访问。

步骤

  1. 打开 vue.config.js 文件(如果没有,创建一个),添加如下配置: module.exports = { devServer: { host: '0.0.0.0', // 使服务对所有网络接口开放 port: 8080, // 可选:设置端口 open: true, // 可选:启动后自动打开浏览器 } }; 参考:Vue CLI: Configuration for devServer
  2. 启动服务: npm run serve 然后在局域网内的其他设备上输入 http://你的电脑IP:8080 进行访问。

参考链接

  1. Vite: Expose Local Instance to Network
  2. Amit Merchant: Expose Local Vite Instance
  3. Dev.to: How to Expose Vite to the Network
  4. Reddit: Share VueJS Dev Server on Wi-Fi
  5. Vue CLI: Configuration for devServer