Laravel+Vite运行npm run dev出现ERR_CONNECTION_REFUSED问题求助

问题描述 #

使用Laravel 10.8.0 + Vite 4.3.1 + Breeze脚手架开发，此前一个月运行正常，今日执行php artisan serve --host=IP后，运行npm run dev出现ERR_CONNECTION_REFUSED [::1]:5173错误。

尝试过的配置修改：

• 配置vite.config.js为：

export default defineConfig({
    server: {
        host: "0.0.0.0",
        port: 5173,
        hmr: {
            host: "127.0.0.1",
        },
    },
    // 其他配置...
});

仅以下两种方式可正常运行：

1. 执行npm run build构建生产版本
2. 在vite.config.js中手动指定当前设备的IP：

export default defineConfig({
    server: {
        host: "192.168.31.166",
        port: 5173,
        hmr: {
            host: "192.168.31.166",
        },
    },
    // 其他配置...
});

痛点：需在办公/远程两个WiFi环境切换，无固定IP，不想每次手动修改配置。已执行npm update和composer update更新至最新版本，问题未解决。

可行解决方案 #

方案1：自动获取当前局域网IP #

在vite.config.js中添加自动获取IP的逻辑，无需手动指定：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import os from 'os';

// 获取当前设备的局域网IPv4地址
function getLocalIp() {
    const interfaces = os.networkInterfaces();
    for (const devName in interfaces) {
        const iface = interfaces[devName];
        for (const alias of iface) {
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                return alias.address;
            }
        }
    }
    return '127.0.0.1';
}

export default defineConfig({
    server: {
        host: getLocalIp(),
        port: 5173,
        hmr: {
            host: getLocalIp(),
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

切换网络后重启npm run dev，会自动适配新环境的IP。

方案2：通过环境变量配置Vite #

1. 在项目根目录.env文件中添加：

VITE_HOST=0.0.0.0
VITE_HMR_HOST=auto

2. 修改vite.config.js读取环境变量：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: process.env.VITE_HOST || '0.0.0.0',
        port: 5173,
        hmr: {
            host: process.env.VITE_HMR_HOST || '127.0.0.1',
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Vite的auto选项会自动检测HMR主机地址，适配当前网络。

方案3：自定义本地域名配合hosts文件 #

1. 修改vite.config.js设置自定义主机名：

export default defineConfig({
    server: {
        host: 'dev.local',
        port: 5173,
        hmr: {
            host: 'dev.local',
        },
    },
    // 其他配置...
});

2. 修改系统hosts文件，将自定义域名指向当前IP：

• Windows：编辑C:\Windows\System32\drivers\etc\hosts
• macOS/Linux：编辑/etc/hosts
  添加一行：[当前IP] dev.local（切换网络时仅需更新此IP即可）

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