Day 5: Deploy a Production Vue App | Vue.js in 5 Days

The Production Build

During development, Vite serves your source files directly. For production, it bundles and minifies everything into optimized static files. Run the build command and inspect what it produces.

Terminal

npm run build

# Output:
# dist/
#   index.html
#   assets/
#     index-abc123.js    ← all your JavaScript, minified
#     index-def456.css   ← all your CSS

# Preview the production build locally before deploying
npm run preview

The dist/ folder is what you deploy. It's just static files — no server needed. That's what makes Vue apps cheap and fast to host.

Environment Variables

Never hardcode API keys or environment-specific URLs in your code. Use Vite's environment variable system.

.env (development)

# Vite only exposes vars that start with VITE_
VITE_API_URL=http://localhost:3000
VITE_APP_TITLE=My App Dev

.env.production

VITE_API_URL=https://api.myapp.com
VITE_APP_TITLE=My App

Using in your code

// Access with import.meta.env
const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV
const isProd = import.meta.env.PROD

// Use in API calls
const res = await fetch(`${import.meta.env.VITE_API_URL}/users`)

💡

Add .env.local to your .gitignore. This file holds your real secrets and never gets committed. The .env file (with non-secret defaults) can be committed safely.

Deploying to Netlify

netlify.toml

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

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  # This redirect is REQUIRED for Vue Router history mode
  # Without it, refreshing on /about returns a 404

Push your code to GitHub, then connect the repo in Netlify. Set your environment variables in Netlify's dashboard (Site Settings → Environment Variables). Netlify auto-deploys every time you push to main.

Deploying to Vercel

Terminal (Vercel CLI)

npm i -g vercel
vercel login
vercel  # follow the prompts

# Or connect GitHub repo at vercel.com for auto-deploys

vercel.json

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

ℹ️

Both Netlify and Vercel offer free tiers that are more than enough for personal projects. Vercel has slightly better performance on their CDN. Netlify has more generous build minutes on the free tier. Either works great for Vue.

GitHub Actions: Auto-Deploy on Push

.github/workflows/deploy.yml

name: Deploy to Netlify

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: netlify/actions/cli@master
        with:
          args: deploy --dir=dist --prod
        env:
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

📝 Day 5 Exercise

Deploy Your Vue App Live

Take the task list app from Day 1 (or any component you've built this week) and make it production-ready.
Add at least one environment variable for your app title or API URL.
Run npm run build and inspect the dist/ folder.
Run npm run preview and verify everything works on the production build.
Push to GitHub and deploy to either Netlify or Vercel.
Share the live URL. You just shipped a Vue app.

Day 5 Summary

npm run build creates an optimized dist/ folder of static files.
Use VITE_ prefix for environment variables. Access them via import.meta.env.
Vue Router history mode requires a catch-all redirect on your hosting provider.
Both Netlify and Vercel auto-deploy from GitHub — push to main, site updates in seconds.
Store secrets as environment variables in your hosting dashboard, not in your code.

→

← Previous

Day 4: Vue Router: Multi-Page Apps

Done!

Back to Course Overview

→