Vue Build

🏗️ What is Vue Build?

Vue build process compiles your development code into optimized production files. It bundles components, minifies code, removes development warnings, and creates efficient assets ready for deployment to web servers or hosting platforms.


# Build your Vue app for production
npm run build

Build Process Steps

📦

Bundling

Combines all files into bundles

npm run build

⚡

Minification

Reduces file sizes

app.js → app.min.js
(smaller size)

🎯

Optimization

Improves performance

Tree shaking
Code splitting

📁

Output

Creates dist folder

dist/
  index.html
  assets/

🔹 Creating a Vue Project

Start with Vue CLI or Vite:

🔸 Using Vite (Recommended)

# Create new project
npm create vue@latest

# Navigate to project
cd my-vue-app

# Install dependencies
npm install

# Run development server
npm run dev

🔸 Using Vue CLI

# Install Vue CLI globally
npm install -g @vue/cli

# Create new project
vue create my-app

# Navigate and run
cd my-app
npm run serve

🔹 Development vs Production

Different modes for different purposes:

Development Mode:

Hot reload: Changes appear instantly
Source maps: Easy debugging
Warnings: Helpful error messages
Larger files: Includes debug info

npm run dev

Production Mode:

Minified: Smaller file sizes
Optimized: Faster loading
No warnings: Clean console
Tree shaking: Removes unused code

npm run build

🔹 Build Command

Build your app for production:

# Build the project
npm run build

# Output appears in dist/ folder
# dist/
#   ├── index.html
#   ├── assets/
#   │   ├── index-abc123.js
#   │   ├── index-def456.css
#   │   └── logo-ghi789.png
#   └── favicon.ico

Build Output:

vite v5.0.0 building for production...
✓ 34 modules transformed.
dist/index.html                   0.45 kB
dist/assets/index-4e9f8ac2.css    1.23 kB
dist/assets/index-b2c3d4e5.js    143.21 kB
✓ built in 2.45s

🔹 Build Configuration

Customize build with vite.config.js:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    minify: 'terser',
    sourcemap: false
  },
  base: '/' // Base public path
})

outDir: Output directory name
assetsDir: Assets folder name
minify: Minification method
sourcemap: Generate source maps
base: Public base path

🔹 Environment Variables

Use different configs for dev and production:

# .env.development
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 Vue:

// Access environment variables
const apiUrl = import.meta.env.VITE_API_URL;
const appTitle = import.meta.env.VITE_APP_TITLE;

console.log(apiUrl); // Different in dev vs production

🔹 Preview Build Locally

Test production build before deployment:

# Build the app
npm run build

# Preview the production build
npm run preview

# Opens at http://localhost:4173

The preview command serves your production build locally, letting you test exactly what users will see after deployment.

🔹 Deployment Options

Deploy your built app to various platforms:

🔸 Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

🔸 Netlify

# Install Netlify CLI
npm i -g netlify-cli

# Deploy
netlify deploy --prod

🔸 GitHub Pages

# Install gh-pages
npm i -D gh-pages

# Add to package.json scripts:
"deploy": "npm run build && gh-pages -d dist"

# Deploy
npm run deploy

🔹 Build Optimization Tips

Code splitting: Split large bundles into smaller chunks
Lazy loading: Load components only when needed
Image optimization: Compress and optimize images
Remove console logs: Clean up debug statements
Use production mode: Always build with NODE_ENV=production
Enable compression: Use gzip or brotli on server

🔹 Common Build Issues

Problem: Build fails with errors

Solution: Check for TypeScript errors, missing dependencies, or syntax issues