Vue Projelerinizi Kolayca Statik HTML'e Çevirin

Vue.js Nedir?

Vue.js, kullanıcı arayüzleri oluşturmak için kullanılan progresif bir JavaScript framework'üdür. Dinamik ve etkileşimli kullanıcı deneyimleri sunar, ancak bazen bu dinamik içeriği statik bir HTML dosyası olarak sunmak isteyebilirsiniz.

Statik HTML'e Çevirmenin Avantajları

Statik HTML, sunucu tarafında işleme gerek kalmadan doğrudan kullanıcılara sunulabilir. Bu, yükleme süresini azaltır ve SEO (Arama Motoru Optimizasyonu) için daha uygun hale getirir. Ayrıca, statik dosyalar daha güvenlidir ve daha az sunucu kaynağı gerektirir. Eğer projeniz dinamik olarak kalacaksa, fakat sadece tarayıcı tarafına statik olarak gönderecekseniz Nuxt.js gibi alternatiflere bakmanız gerekecetir.

Puppeteer ile Vue Projelerini Statik HTML'e Çevirme

Vue projenizi statik HTML'e çevirmek için Puppeteer adlı tarayıcı otomasyon aracını kullanabilirsiniz. Puppeteer, Chrome tarayıcısını kontrol ederek sayfa içeriğini yakalamanızı sağlar. Aşağıdaki adımları izleyerek Vue projenizi statik HTML dosyasına dönüştürebilirsiniz.

Adım 1: Puppeteer'ı Kurun

İlk olarak, projenizin kök dizininde Puppeteer'ı kurmanız gerekmektedir:

npm install puppeteer

Adım 2: Node.js Scripti Oluşturun

`screenshot.js` adında bir dosya oluşturun ve aşağıdaki kodu ekleyin:

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
	// Tarayıcıyı başlat
	const browser = await puppeteer.launch();
	// Yeni bir sayfa aç
	const page = await browser.newPage();
	// Vue uygulamanızın çalıştığı URL'ye gidin
	await page.goto('http://localhost:5174', { waitUntil: 'networkidle2' });

	// Sayfa içeriğini alın
	const html = await page.content();
	// HTML içeriğini bir dosyaya kaydedin
	fs.writeFileSync('dist/screenshot.html', html);

	// Tarayıcıyı kapat
	await browser.close();
})();

Adım 3: Vue Uygulamanızı Çalıştırın

Vue uygulamanızı geliştirme modunda çalıştırın:

npm run serve

Adım 4: Scripti Çalıştırın

Aşağıdaki komutu çalıştırarak scripti çalıştırın ve statik HTML dosyasını oluşturun:

node screenshot.js

Sonuç

Bu adımları izleyerek Vue projenizi statik HTML'e çevirebilirsiniz. Bu yöntem ile performanslı ve SEO uyumlu bir web sitesi elde edersiniz. Umarız bu makale, Vue projelerinizi statik HTML olarak sunmanıza yardımcı olur.