Flutter项目部署至Vercel后出现404: NOT_FOUND错误的技术求助

Hey there, let’s break down why your UPKeepApp-FluxStore is showing a 404 after deploying to Vercel, and how to fix it. Looking at your build logs, the issue is pretty clear—Vercel didn’t actually build your Flutter Web app, it just cloned and uploaded the source code directly. Here’s what to do step by step:

1. Correct the Framework Preset #

You selected Others as the framework preset, which tells Vercel "I’ll handle everything myself"—but you didn’t provide the build instructions it needs. Instead:

• Go to your Vercel project settings → Build & Development Settings
• Change the Framework Preset to Flutter (if available) or keep it as Others but manually set the build config below.

2. Set Up Build Command and Output Directory #

Flutter Web requires a specific build command to generate static files, and Vercel needs to know where those files live. In your Vercel project settings:

• Set Build Command to: flutter build web --release
• Set Output Directory to: build/web (this is where Flutter dumps the compiled static files after building)

Note: If you don’t have Flutter installed in Vercel’s environment, the build might fail. You can add a package.json to your project root with a build script that handles this, but usually Vercel has Flutter pre-installed for the Flutter preset. Alternatively, you can define these settings via a vercel.json file (more on that below).

3. Ensure Your Flutter Project Supports Web #

Double-check that your project is configured for web:

• Run flutter create . --platforms web locally (if you haven’t already) to add web support
• Verify there’s a web folder in your project root—this is where the web entry point lives.

4. Fix SPA Routing Issues (For Refresh/Direct Links) #

If your Flutter app uses client-side routing (most do), you’ll get a 404 when refreshing pages or accessing direct links. Fix this by creating a vercel.json file in your project root with:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

This tells Vercel to route all requests to your main index.html file, letting Flutter handle the routing internally.

5. Re-Deploy with the Correct Settings #

After making these changes, push your updates to GitHub, then trigger a new deployment in Vercel. Your build log should now show steps like installing dependencies, running flutter build web, and uploading the build/web directory—no more skipping straight to "Done with .".

Let me know if you hit any snags along the way!

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