npm run dev时WebSocket连接失败求助（npm run build正常）

问题分析 #

dev模式下Vite依赖WebSocket实现热重载，本地HTTPS环境中自签名证书未被信任或Vite未正确配置HTTPS，导致WebSocket连接失败，进而拖慢页面加载；build模式不依赖热重载，因此无此问题。

解决方案 #

1. 信任Laragon的自签名根证书 #

Laragon自带的SSL证书位于C:\laragon\etc\ssl\laragon.crt，按以下步骤安装信任：

• 双击该证书文件，点击“安装证书”
• 选择“本地计算机”，点击“下一步”
• 选择“将所有证书放入下列存储”，点击“浏览”
• 选择“受信任的根证书颁发机构”，完成安装

2. 修改Vite配置适配HTTPS和WebSocket #

更新vite.config.js，添加HTTPS证书配置和WebSocket主机指定：

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

export default defineConfig({
    server: {
        https: {
            key: fs.readFileSync('C:/laragon/etc/ssl/laragon.key'),
            cert: fs.readFileSync('C:/laragon/etc/ssl/laragon.crt'),
        },
        hmr: {
            host: 'app.dev', // 与.env中的APP_URL域名保持一致
        },
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

3. 清除缓存并重启服务 #

• 执行Laravel配置缓存清除：

  php artisan config:clear
  

• 停止当前npm run dev进程，删除项目根目录下的node_modules/.vite文件夹
• 重新启动开发服务：

  npm run dev
  

4. 额外排查点 #

• 检查系统hosts文件（C:\Windows\System32\drivers\etc\hosts）是否存在127.0.0.1 app.dev的映射，Laragon通常会自动配置，若缺失手动添加
• 确认Vite默认端口5173未被其他程序占用，可通过命令netstat -ano | findstr :5173检查，如有占用则更换端口（在vite.config.js的server.port中指定）

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