Vue — Deployment

Build for production

npm run build

Output in dist/ folder.

Static hosting

# Netlify
npm run build
# Drag dist/ to Netlify dashboard

# Vercel
npm run build
vercel deploy

# GitHub Pages
npm run build
# Enable GitHub Pages in repo settings

Vercel deployment

npm install -g vercel
vercel login
vercel

vercel.json:

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

Netlify deployment

netlify.toml:

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Docker

FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Environment variables

# .env.production
VITE_API_URL=https://api.example.com

// Access in code
const apiUrl = import.meta.env.VITE_API_URL

Performance checklist

1. Enable gzip compression
2. Use CDN for assets
3. Optimize images
4. Code splitting
5. Minify CSS/JS

Mini Practice

1. Build for production
2. Deploy to Vercel
3. Set up environment variables
4. Configure Docker

Up Next

Continue with Best Practices - Tips and patterns.