Laravel Breeze(Vue)+Homestead环境下npm run dev及HMR无法运行

1. 修改Vite配置文件 #

编辑项目根目录的vite.config.js，添加服务器配置项，指定绑定所有网络接口并设置正确的资源访问源：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: '0.0.0.0', // 绑定所有网络接口，允许外部访问
        port: 5173,
        origin: 'http://homestead.test:5173' // 指定Vite资源的访问地址
    }
});

2. 配置Homestead端口转发 #

打开Homestead的Homestead.yaml文件，添加端口转发规则，将虚拟机的5173端口映射到宿主机的5173端口：

ports:
    - send: 5173
      to: 5173
      protocol: tcp

执行以下命令重启虚拟机，使配置生效：

homestead reload --provision

3. 恢复package.json的dev命令 #

将package.json中的dev命令改回默认值，无需额外指定host：

"scripts": {
    "dev": "vite",
    "build": "vite build"
}

4. 确认宿主机hosts配置 #

检查宿主机的hosts文件，确保已添加Homestead域名映射：

192.168.10.10 homestead.test

（注：192.168.10.10为Homestead默认虚拟机IP，若你的配置不同请替换为对应IP）

5. 重启服务验证 #

进入虚拟机内的项目目录，执行npm run dev启动Vite开发服务器，再通过浏览器访问http://homestead.test，此时控制台应不再出现连接错误，热重载功能可正常工作。

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