Lewati ke konten utama

🚀 Build & Deploy Aplikasi Vue.js

Setelah selesai membangun aplikasi Vue di local development, langkah selanjutnya adalah membuild untuk produksi dan mendeploy ke server atau platform hosting pilihanmu.

🏗️ 1. Build untuk Produksi​

a. Gunakan perintah build:​

npm run build

b. Hasil build:​

Vue akan membuat folder dist/ berisi file HTML, CSS, dan JS yang siap diupload ke server.

Pastikan base URL disesuaikan di vue.config.js jika bukan di root (/).

🌐 2. Deploy ke Netlify​

a. Drag & Drop:​

  1. Buka https://app.netlify.com/

  2. Login dan klik "Add new site"

  3. Upload folder dist/

b. Deploy via Git:​

  1. Hubungkan repository Git

  2. Build command: npm run build

  3. Publish directory: dist

⚡ 3. Deploy ke Vercel​

a. Via CLI:​

npm install -g vercel
vercel

Ikuti instruksi → pilih folder dist/

b. Atau via dashboard:​

  1. Login ke https://vercel.com/

  2. Import repository

  3. Build command: npm run build

  4. Output: dist

🧑‍💻 4. Deploy ke GitHub Pages​

a. Install plugin:​

npm install gh-pages --save-dev

b. Tambahkan ke package.json:​

"scripts": {
  "deploy": "gh-pages -d dist"
}

c. Deploy:​

npm run build
npm run deploy

Tambahkan vue.config.js:

module.exports = {
  publicPath: '/nama-repo/'
}

📦 5. Deploy ke VPS / Hosting Sendiri​

a. Build:​

npm run build

b. Upload folder dist/ ke hosting:​

  • Via FTP / cPanel: Upload ke public_html

  • Via SSH / VPS:

scp -r dist/ user@server:/var/www/html

c. Pastikan server support:​

  • Nginx / Apache

  • Atur index.html sebagai file default

  • Atur fallback untuk SPA (opsional)

🧠 6. vue.config.js untuk Produksi​

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/nama-repo/' // jika deploy di subfolder
    : '/'
}

📋 7. Tips Tambahan​

  • Pastikan dist/ selalu di-ignore di Git:
echo "dist/" >> .gitignore

  • Gunakan environment variables di .env.production

  • Periksa console untuk error saat build

  • Gunakan CDN untuk file besar jika perlu