Shopify CLI部署至Heroku时出现server connection lost轮询重启报错

• 核心错误是Vite的HMR配置硬编码了固定端口，没有适配多场景网络规则：你手动设置hmr.clientPort: 8080后，Vite前端客户端会默认向8080端口发起WebSocket连接，但两个场景下这个配置完全不匹配实际运行环境：
  1. 本地通过Shopify CLI启动时，CLI会启动随机端口（即报错里的64999）的隧道做请求转发，硬编码8080会导致客户端找错连接地址，直接触发WebSocket连接失败
  2. 部署到Heroku时，平台不会开放固定的8080端口对外提供WebSocket服务，硬编码端口会导致连接请求直接打到不存在的服务端口，返回404
• net::ERR_BLOCKED_BY_CLIENT报错来自浏览器侧的拦截：广告拦截、隐私防护类插件会默认拦截非标准端口的本地WebSocket请求，叠加端口配置错误，会直接中断Vite和开发服务器的连接，触发[vite] server connection lost. polling for restart...的轮询提示。
• 配置逻辑存在环境混淆问题：当前配置没有区分开发/生产环境，Heroku生产部署阶段Vite只会执行构建输出静态资源，不会启动开发服务器，HMR相关配置在生产环境完全无效，甚至会让构建后的页面残留无效的WebSocket请求逻辑。

• 调整Vite配置，按运行环境动态加载HMR规则，删除硬编码的端口配置，参考配置如下：

import react from "@vitejs/plugin-react";
import "dotenv/config";

/**
 * @type {import('vite').UserConfig}
 */
export default {
  define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
  },
  server: {
    hmr: process.env.NODE_ENV === "development" ? {
      // 本地Shopify CLI开发场景保留8080端口配置，Heroku环境不硬编码端口，自动匹配平台分配的路由端口
      clientPort: process.env.HEROKU_APP_NAME ? undefined : 8080,
      // Heroku环境强制使用wss协议匹配平台HTTPS规则，避免混合内容拦截
      protocol: process.env.HEROKU_APP_NAME ? "wss" : "ws",
    } : false,
  },
  plugins: [react()],
};

• 排查浏览器侧拦截：临时关闭所有广告拦截、隐私防护类插件（包括AdBlock、uBlock Origin、隐私獾等），这类插件是触发ERR_BLOCKED_BY_CLIENT报错的直接原因，本地开发阶段可以把Shopify开发域名加入插件白名单。
• 校验Heroku部署配置：
  • 确认Heroku的构建命令为npm run build，生产启动命令使用静态资源托管服务（比如serve包）托管dist目录产物，禁止在生产环境启动vite dev开发服务器
  • 确认Heroku后台已正确配置SHOPIFY_API_KEY环境变量，避免构建阶段变量注入失败

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