如何将Vite开发的项目部署到Heroku？部署后报错如何解决？

问题根源 #

你当前的部署配置存在两个核心错误：

• package.json中start命令默认启动的是Vite开发服务器，该服务仅适用于本地开发场景，默认仅监听本地127.0.0.1地址的3000端口，既无法对外提供访问，也不会读取Heroku动态分配的$PORT环境变量，直接触发Heroku的R10启动超时错误。
• 你配置的NPM_CONFIG_PRODUCTION=false等环境变量属于冗余配置，反而会导致生产环境保留不必要的开发依赖，增大包体积。

解决方案 #

方案一：静态站点部署（推荐，性能最优）

该方案将Vite构建生成的静态产物用专业静态文件服务托管，资源占用更低、性能更高：

1. 安装serve作为生产依赖：

npm install serve --save

2. 修改package.json中的scripts配置：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "serve -s dist -l $PORT"
  }
}

配置说明：

• Heroku部署时会自动执行build命令生成dist静态产物目录
• start命令中的-s参数支持单页应用路由重写，避免页面刷新出现404
• -l $PORT参数会读取Heroku动态分配的端口完成服务绑定

3. 删除你之前配置的NPM_CONFIG_PRODUCTION=false、YARN_PRODUCTION=false两个冗余环境变量，重新提交代码部署即可。

方案二：Vite预览模式部署（仅适合临时预览）

如果需要直接用Vite的预览服务运行，只需修改package.json的start命令即可：

"start": "vite preview --port $PORT --host 0.0.0.0"

配置说明：

• --host 0.0.0.0参数允许服务对外暴露，可被外部网络访问
• --port $PORT参数读取Heroku分配的端口完成绑定

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