Deploying Vue Applications

npm run build
# Outputs optimized files to /dist folder

npm run preview
# Preview the production build locally before deploying

/dist
├── index.html
├── assets/
│   ├── index-[hash].js      ← Main bundle
│   ├── vendor-[hash].js     ← node_modules (split automatically)
│   ├── about-[hash].js      ← Lazy-loaded chunks
│   └── index-[hash].css

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

export default defineConfig({
  plugins: [
    vue(),
    visualizer({ open: true })  // Bundle analyzer
  ],
  build: {
    outDir: 'dist',
    sourcemap: false,  // true for easier debugging in production
    minify: 'esbuild',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          ui: ['@headlessui/vue', 'lucide-vue-next']
        }
      }
    },
    chunkSizeWarningLimit: 500  // Warn if chunk > 500KB
  }
})

# .env (all environments)
VITE_APP_NAME=MyVueApp

# .env.development (dev server only)
VITE_API_BASE_URL=http://localhost:3000

# .env.production (npm run build)
VITE_API_BASE_URL=https://api.myapp.com

# .env.local (local overrides — NOT committed to git)
VITE_API_KEY=my-secret-key

// Accessing env vars in Vue (must start with VITE_)
const apiUrl = import.meta.env.VITE_API_BASE_URL
const appName = import.meta.env.VITE_APP_NAME
const isDev = import.meta.env.DEV      // true in development
const isProd = import.meta.env.PROD    // true in production
const mode = import.meta.env.MODE      // 'development' | 'production'

# Method 1: Vercel CLI
npm install -g vercel
vercel        # Follow prompts — auto-detects Vue/Vite
vercel --prod # Deploy to production

# Method 2: GitHub Integration (Recommended)
# 1. Push code to GitHub
# 2. Go to vercel.com → New Project → Import from GitHub
# 3. Framework: Vite
# 4. Build command: npm run build
# 5. Output directory: dist
# 6. Click Deploy → Get URL instantly

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

# Method 1: Netlify CLI
npm install -g netlify-cli
netlify deploy --dir=dist --prod

# Method 2: Drag & Drop
# Build locally: npm run build
# Drag /dist folder to netlify.com/drop

# Method 3: GitHub integration (auto-deploy on push)
# netlify.com → New site from Git → GitHub → Select repo

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

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

npm install -D gh-pages

export default defineConfig({
  base: '/your-repo-name/',  // Required for GitHub Pages subdirectory
})

{
  "scripts": {
    "build": "vite build",
    "deploy": "npm run build && gh-pages -d dist"
  }
}

npm run deploy  # Deploys to https://username.github.io/repo-name/

# Nginx (for self-hosted VPS)
server {
    listen 80;
    server_name myapp.com www.myapp.com;
    root /var/www/html/dist;
    index index.html;

    # Redirect ALL requests to index.html for SPA routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache static assets aggressively
    location /assets {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

# Apache (.htaccess)
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>