部署基于Vite的Node.js Three.js页面到Heroku失败求助

核心原因 #

报错sh: 1: vite: not found（状态码127）本质是两个问题：一是Heroku生产环境默认不会安装devDependencies中的包，若你的vite放在devDependencies里，直接用vite作为启动命令会找不到；二是vite命令是开发环境专用的，线上生产环境应该托管构建后的静态文件，而非直接用Vite启动服务。

具体解决方案 #

1. 配置生产环境启动脚本（推荐方案） #

Vite项目需先构建成静态文件，再用生产级静态服务器托管，步骤如下：

• 安装serve（轻量静态服务器）作为生产依赖：

  npm install serve --save
  

• 修改package.json中的scripts，替换启动命令并保留构建脚本：

  "scripts": {
    "dev": "vite", // 本地开发用
    "build": "vite build", // 生产构建命令，生成dist文件夹
    "start": "serve dist -p $PORT" // 线上启动命令，适配Heroku自动分配的PORT环境变量
  }
  

• 确保.gitignore中包含dist（不要把构建产物提交到Git，让Heroku在部署时自动构建）：

  dist
  node_modules
  

2. 强制Heroku执行构建流程 #

Heroku默认会在依赖安装完成后检查build脚本并自动执行，若未触发，可添加heroku-postbuild脚本强制构建：

"scripts": {
  // ... 其他脚本
  "heroku-postbuild": "vite build"
}

如果vite在devDependencies中，需让Heroku安装开发依赖，通过命令设置环境变量：

heroku config:set NPM_CONFIG_PRODUCTION=false

3. 指定Node/NPM版本（避免兼容问题） #

在package.json中添加engines字段，确保Heroku使用和本地一致的Node版本：

"engines": {
  "node": ">=18.x", // 替换成你本地的Node版本，比如18.17.0
  "npm": ">=9.x"
}

4. 本地验证后再部署 #

• 先在本地测试生产构建和启动流程，确认正常后再推送：

  npm run build
  npm start
  

• 推送代码后，实时查看Heroku日志排查问题：

  heroku logs --tail
  

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