Vercel Deployment Guide
Vercel is a modern frontend deployment platform that supports multiple frameworks and static sites. VUP projects provide two simple deployment methods.
Deployment Methods
Method 1: Local Deployment
Use the deployment commands in the project root directory:
bash
# Deploy to Vercel
pnpm deploy:prod
# Deploy preview version
pnpm deploy:previewMethod 2: GitHub Automatic Deployment
Connect GitHub Repository
- Import GitHub repository in Vercel console
- Select project root directory as deployment directory
Automatic Deployment
- Push to
mainbranch automatically deploys to production - Push to other branches automatically generates preview links
- Push to
Project Configuration
The project root directory already includes a vercel.json configuration file:
json
{
"buildCommand": "cd apps/{project_name} && pnpm build",
"outputDirectory": "apps/{project_name}/.output",
"installCommand": "pnpm install --no-frozen-lockfile",
"devCommand": "cd apps/{project_name} && pnpm dev",
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
],
"headers": [
{
"source": "/assets/(.*)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "/(.*)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=0, must-revalidate"
}
]
}
]
}Note: Replace
{project_name}with your actual app directory name underapps/, for examplehomepageormy-app.
Environment Variables
Development Environment
Create .env.local file:
bash
# .env.local
VITE_API_BASE=https://api.example.com
VITE_APP_TITLE=My AppProduction Environment
Set environment variables in Vercel console:
- Go to project settings
- Select "Environment Variables"
- Add variables and select environment
Custom Domain
- Go to project in Vercel console
- Select "Settings" > "Domains"
- Add custom domain
- Configure DNS records