Vue3 Vite项目部署DigitalOcean App Platform端口不符问题求助

核心原因 #

DigitalOcean App Platform 作为PaaS平台，会强制接管端口配置：它会为每个应用分配内部端口（常见为5050），并通过PORT环境变量传递给应用。无论你在启动命令里硬编码什么端口，平台都会忽略——因为平台需要统一管理端口映射（将内部端口转发到对外的80/443端口）。你的应用没有监听平台指定的PORT端口，导致平台无法建立连接，最终部署失败。

解决方法 #

有两种可行的调整方式：

1. 修改启动命令，读取平台环境变量

将启动命令改为：

npm run preview --port $PORT

这样Vite的preview服务会自动监听平台提供的PORT环境变量对应的端口（比如5050）。

2. 在Vite配置文件中适配环境变量

修改vite.config.js（或vite.config.ts），让preview端口优先读取PORT环境变量，本地开发时 fallback 到8080：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  preview: {
    port: process.env.PORT || 8080
  }
})

之后启动命令直接使用：

npm run preview

无需再手动指定--port参数。

额外说明 #

部署到PaaS平台时，永远不要硬编码端口，必须遵循平台的环境变量约定——这是通用规则，包括Heroku、Netlify、Vercel等平台都采用类似机制，确保平台能统一管理应用的网络连接。

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