Vite React+Node.js+Shopify集成应用HMR功能异常问题

算力阿峰

2026-7-5

解决React(Vite)+Node.js Shopify应用中HMR因代理配置失效的问题

问题原因

你的代理规则^/(\\?.*)?$过于宽泛，会拦截所有根路径请求（包括Vite热模块替换的WebSocket连接请求），并转发到后端Node服务。而后端服务没有处理HMR的逻辑，导致热更新信号无法正常传输，最终HMR失效。

解决方案

1. 调整代理规则，排除HMR专属请求

修改proxy配置的正则表达式，排除Vite HMR的默认路径/vite-hmr，让这类请求直接由Vite服务器处理，不经过代理：

proxy: {
    // 排除HMR路径，仅代理其他根路径请求
    '^/(?!vite-hmr)(\\?.*)?$': proxyOptions,
    '^/api(/|(\\?.*)?$)': proxyOptions,
},

2. 修正Proxy的WebSocket配置

HMR依赖WebSocket传输更新信号，确保代理配置不会干扰WebSocket连接：

const proxyOptions = {
    target: `http://127.0.0.1:${process.env.WEB_PORT}`,
    changeOrigin: false,
    secure: true,
    ws: false, // 仅当后端需代理WebSocket时设为true，否则保持false
};

3. 验证HMR连接状态

修改配置后重启服务，在浏览器开发者工具的Network > WebSocket标签下，检查是否成功建立到ws://localhost:64999的连接，确保HMR信号能正常传输。

4. 简化本地HMR配置（可选）

本地开发时可简化HMR配置，让Vite自动处理连接细节：

let hmrConfig = { overlay: true }; // 开启错误提示浮层

if (host !== 'localhost') {
    hmrConfig = {
        ...hmrConfig,
        protocol: 'wss',
        host: host,
        port: process.env.FRONTEND_PORT,
        clientPort: 443,
    };
}