Laravel部署Heroku后连接Pusher频道失败：提示需传入App Key

本地Laravel应用可正常连接Pusher频道，但部署至Heroku生产环境后，控制台抛出上述错误。已在Heroku配置变量及Laravel的.env文件中添加Pusher相关参数，具体配置如下：

Heroku配置变量 #

app_id = "1682617"
key = "4******************e"
secret = "3******************a"
cluster = "mt1"

本地开发凭证 #

PUSHER_APP_ID=1682617
PUSHER_APP_KEY=c******************3
PUSHER_APP_SECRET=f******************1
PUSHER_HOST=ws-mt1.pusher.com

Bootstrap.js代码 #

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

 window.Echo = new Echo({
   broadcaster: 'pusher',
   key: import.meta.env.VITE_PUSHER_APP_KEY,
   wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
   wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
   wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
   forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
   enabledTransports: ['ws', 'wss'],
 });

• 修正Heroku环境变量命名
  前端代码使用的是import.meta.env.VITE_*格式的变量，但Heroku当前配置的变量名不符合Vite的注入规则——只有以VITE_开头的环境变量才会被打包工具注入到前端代码中。需要将Heroku的配置变量修改为：

  VITE_PUSHER_APP_ID="1682617"
  VITE_PUSHER_APP_KEY="4******************e"
  VITE_PUSHER_APP_SECRET="3******************a"
  VITE_PUSHER_APP_CLUSTER="mt1"
  VITE_PUSHER_HOST="ws-mt1.pusher.com"
  

• 确保Heroku部署时重新构建前端资源
  Laravel搭配Vite时，部署到Heroku必须执行npm run build编译前端资源，否则新的环境变量无法注入到打包后的代码里。可以通过两种方式实现：

  1. 在package.json的scripts中添加heroku-postbuild命令：

     "scripts": {
       "heroku-postbuild": "npm install && npm run build"
     }
     

  2. 在Heroku的Procfile中包含构建步骤。

• 验证环境变量是否被正确读取
  可以在Bootstrap.js中临时添加日志代码，部署后查看浏览器控制台输出，确认变量是否加载：

  console.log('Pusher Key:', import.meta.env.VITE_PUSHER_APP_KEY);
  console.log('Pusher Cluster:', import.meta.env.VITE_PUSHER_APP_CLUSTER);
  

  如果输出为undefined，说明环境变量未被正确注入，回到第一步检查变量命名。

• 排查Laravel缓存问题
  生产环境下如果之前缓存过配置，需要执行php artisan config:clear清除缓存，确保新的环境变量生效。

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