Mencipta & Menjalankan Projek Nuxt.js Dengan ServBay
Apa Itu Nuxt.js?
Nuxt.js ialah kerangka sumber terbuka berasaskan Vue.js yang direka untuk membina aplikasi web moden dan berprestasi tinggi. Ia menyederhanakan konfigurasi kompleks supaya pembangun dapat fokus pada logik perniagaan. Nuxt.js amat berkemampuan menghasilkan aplikasi dengan rendering di sisi pelayan (SSR), namun turut menyokong penjanaan laman statik (SSG) yang hebat — menjadikannya pilihan ideal untuk membina laman serta aplikasi kaya kandungan yang mesra SEO.
Ciri Utama & Kelebihan Nuxt.js
- Rendering Sisi Pelayan (SSR): Prarender halaman Vue di pelayan untuk mempercepatkan muat halaman pertama, memperbaiki pengalaman pengguna, dan memudahkan enjin carian membaca kandungan anda.
- Penjanaan Laman Statik (SSG): Hasilkan fail HTML statik sewaktu binaan. Kaedah ini sangat pantas, mudah dihantar, dan tidak memerlukan runtime pelayan — sesuai untuk laman kandungan tetap seperti blog atau dokumentasi.
- Pembahagian Kod Automatik: Nuxt.js membahagi kod JavaScript secara automatik berdasarkan laluan, jadi hanya kod yang diperlukan dimuat setiap kali pelawat melawati laman — ini mengoptimumkan prestasi aplikasi.
- Routing Berdasarkan Sistem Fail: Laluan secara automatik diwujudkan dengan mencipta fail
.vue
dalam direktoripages
, memudahkan pengurusan routing. - Modular: Ekosistem modul yang kukuh membolehkan integrasi pelbagai fungsi dan servis pihak ketiga (seperti Axios, PWA, CMS, dsb) dengan mudah.
- Konvensi Mengatasi Konfigurasi: Mengikuti struktur direktori dan penamaan yang tetap bagi mengurangkan keperluan konfigurasi.
- Pengalaman Pembangunan Dipertingkat: Menyediakan HMR (pembaikan modul panas), laporan ralat, dan lain-lain untuk mempercepatkan workflow pembangunan.
Dengan ciri-ciri ini, Nuxt.js membolehkan anda membina aplikasi web kompleks, berprestasi tinggi, dan mesra SEO dengan lebih cekap.
Konfigurasi & Jalankan Projek Nuxt.js Dalam ServBay
Panduan ini menunjukkan cara menggunakan persekitaran pembangunan lokal ServBay, khususnya pakej Node.js dan pengurusan laman webnya, untuk mencipta, konfigurasikan, dan menjalankan projek Nuxt.js. Ia akan membimbing anda tentang tetapan mod pembangunan (reverse proxy) dan mod pengeluaran (servis fail statik) dalam ServBay.
Prasyarat
Sebelum bermula, pastikan perkara berikut:
- ServBay telah dipasang dengan betul.
- Node.js diaktifkan dan dipasang dalam ServBay. Periksa dan pasang dari tab “Pakej” dalam panel kawalan ServBay.
- Anda memahami asas Node.js, npm (atau Yarn/pnpm), serta perintah terminal.
- (Cadangan) Pemasangan editor kod seperti VS Code.
Mencipta Projek Nuxt.js
Kami akan menggunakan scaffolding create-nuxt-app
untuk memulakan projek Nuxt.js dengan pantas.
Buka Terminal dan Masuk ke Direktori Root ServBay
Direktori root laman web ServBay ialah lokasi yang disyorkan untuk projek pembangunan lokal. Buka terminal anda dan jalankan arahan berikut untuk masuk ke direktori tersebut:
macOS:
bashcd /Applications/ServBay/www
1Windows:
bashcd C:\ServBay\www
1Inisialisasi Projek Nuxt.js Baharu
Gunakan arahan
npx create-nuxt-app
untuk memulakan projek baharu bernamaservbay-nuxt-app
.npx
adalah alat dari npm 5.2+ yang membolehkan anda menjalankan executable npm tanpa pemasangan global.bashnpx create-nuxt-app servbay-nuxt-app
1Ikut arahan konfigurasi dalam terminal. Anda boleh memilih mengikut keperluan masing-masing. Contoh konfigurasi:
bash? Project name: servbay-nuxt-app ? Programming language: JavaScript ? Package manager: Npm # Pilih pengurus pakej, disyorkan Npm atau Yarn ? UI framework: None # Pilih rangka UI mengikut keperluan ? Nuxt.js modules: Axios # Pilih modul Nuxt.js mengikut kehendak ? Linting tools: ESLint # Pilih alat linting jika diperlukan ? Testing framework: None # Pilih rangka ujian jika mahu ? Rendering mode: Universal (SSR / SSG) # Pilih mod rendering; Universal menyokong SSR & SSG ? Deployment target: Server (Node.js hosting) # Pilih target; Server sesuai untuk pembangunan lokal dan pelayan Node.js ? Development tools: jsconfig.json (Recommended for VS Code) # Pilih konfigurasi alat pembangunan jika perlu
1
2
3
4
5
6
7
8
9
10Pasang Kebergantungan Projek
Masuk ke direktori projek yang baru dibuat dan gunakan pengurus pakej pilihan anda untuk memasang kebergantungan projek:
bashcd servbay-nuxt-app npm install # Atau Yarn: yarn install # Atau pnpm: pnpm install
1
2
3
4Tunggu sehingga pemasangan kebergantungan selesai.
Ubah Kandungan Projek untuk Ujian
Untuk memudahkan pengesahan, kita akan ubah fail halaman utama agar ia memaparkan teks ringkas.
Buka Fail
pages/index.vue
Dengan editor kod pilihan anda, buka fail
pages/index.vue
dalam direktori projek.Ubah Kandungan Fail
Tukar kandungan fail menjadi seperti berikut untuk memaparkan "Hello ServBay!" di laman:
html<template> <div> <h1>Hello ServBay!</h1> </div> </template> <script> export default { name: 'IndexPage' } </script> <style scoped> div { text-align: center; margin-top: 50px; font-family: sans-serif; } h1 { color: #333; } </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22Di sini, atribut
scoped
ditambah pada tag style untuk memastikan gaya hanya diterapkan pada komponen semasa dan mempercantikkan paparan.
Jalankan Mod Pembangunan Nuxt.js Dalam ServBay
Server pembangunan Nuxt.js biasanya berjalan dalam port lokal tertentu. Supaya anda dapat mengaksesnya melalui domain tersuai, sijil SSL dan port 80/443 yang diurus ServBay, kita akan setup laman “reverse proxy”.
Mulakan Server Pembangunan Nuxt.js
Dalam root projek, jalankan arahan berikut untuk memulakan server Nuxt.js, contohnya di port
8585
(anda boleh memilih port lain yang belum digunakan).macOS:
bashcd /Applications/ServBay/www/servbay-nuxt-app npm run dev -- --port 8585 # Atau Yarn: yarn dev --port 8585 # Atau pnpm: pnpm run dev --port 8585
1
2
3
4Windows:
bashcd C:\ServBay\www\servbay-nuxt-app npm run dev -- --port 8585 # Atau Yarn: yarn dev --port 8585 # Atau pnpm: pnpm run dev --port 8585
1
2
3
4Server pembangunan biasanya beroperasi di
http://localhost:8585
. Pastikan terminal ini terus dibuka supaya server aktif.Konfigurasi Laman ServBay (Reverse Proxy)
Buka panel kawalan ServBay dan pergi ke tab ‘Laman’. Tekan butang
+
di kiri bawah untuk tambah konfigurasi laman baharu:- Nama: Contohnya,
Nuxt.js Dev Site (Proxy)
. - Domain: Masukkan domain tersuai, contohnya
nuxt-dev.servbay.demo
. Guna akhiran.servbay.demo
sebagai amalan branding ServBay. - Jenis Laman: Pilih
Reverse Proxy
. - Alamat IP: Masukkan
127.0.0.1
(alamat localhost). - Port: Masukkan port server pembangunan Nuxt.js, iaitu
8585
.
Selepas konfigurasi, klik “Tambah” atau “Simpan”. ServBay akan mengemaskini tetapan dan mengaktifkan laman tersebut.
Untuk langkah lebih terperinci tentang penambahan laman pembangun Node.js (biasanya melalui reverse proxy), rujuk Menambah Laman Pembangunan Node.js.
- Nama: Contohnya,
Akses Laman Dalam Mod Pembangunan
Buka pelayar web anda dan lawati domain yang sudah dikonfigurasi di ServBay, contoh
https://nuxt-dev.servbay.demo
.Dengan reverse proxy ServBay, anda boleh mengakses server pembangunan Nuxt.js melalui domain yang diurus ServBay dan port HTTPS. ServBay akan secara automatik menjana dan mengkonfigurasi sijil SSL (ditandatangani oleh ServBay User CA, pastikan sistem anda mempercayai CA ini). Ini membolehkan anda menggunakan HTTPS dalam persekitaran pembangunan, sesuai untuk meniru produksi, menguji Service Worker, ataupun fungsi lain yang memerlukan konteks selamat.
Bina & Jalankan Versi Pengeluaran (Production)
Apabila projek Nuxt.js anda sudah siap dan sedia untuk dihantar (atau anda ingin pra-tonton dalam mode produksi secara lokal), bina versi pengeluaran projek. Untuk mod Universal dan laman statik, lazimnya anda gunakan nuxt generate
(boleh dipanggil dengan skrip npm run export
).
Bina Versi Pengeluaran dan Hasilkan Fail Statik
Dalam root projek, jalankan arahan berikut.
npm run build
akan membina projek, dannpm run export
akan menghasilkan fail HTML statik mengikut routing dalam folder output (dist
).macOS:
bashcd /Applications/ServBay/www/servbay-nuxt-app npm run build npm run export # Atau Yarn: yarn build && yarn export # Atau pnpm: pnpm build && pnpm run export
1
2
3
4
5Windows:
bashcd C:\ServBay\www\servbay-nuxt-app npm run build npm run export # Atau Yarn: yarn build && yarn export # Atau pnpm: pnpm build && pnpm run export
1
2
3
4
5Selepas siap, direktori
dist
akan mengandungi semua fail statik.Konfigurasi Laman ServBay (Servis Fail Statik)
Buka panel kawalan ServBay dan pergi ke tab ‘Laman’. Tekan butang
+
untuk tambah laman baharu:- Nama: Contohnya,
Nuxt.js Prod Site (Static)
. - Domain: Masukkan domain untuk capaian versi pengeluaran, contoh
nuxt-prod.servbay.demo
. - Jenis Laman: Pilih
Static
. - Root Laman: Isikan lokasi folder fail statik Nuxt.js:
- macOS:
/Applications/ServBay/www/servbay-nuxt-app/dist
- Windows:
C:\ServBay\www\servbay-nuxt-app\dist
- macOS:
Klik “Tambah” atau “Simpan” untuk mengaktifkan konfigurasi laman.
- Nama: Contohnya,
Akses Laman Dalam Mod Pengeluaran
Buka pelayar dan lawati domain yang dikonfigurasi, contohnya
https://nuxt-prod.servbay.demo
.Web server berprestasi tinggi ServBay (Caddy atau Nginx, bergantung pada pilihan anda) akan melayan terus fail statik dalam direktori
dist
. Ini adalah kaedah terpantas untuk menyediakan kandungan statik. Anda juga mendapat sijil SSL percuma dan dukungan domain tersuai melalui ServBay.
Rumusan
Dengan ServBay, pengurusan persekitaran pembangunan dan pra-tonton projek Nuxt.js menjadi amat mudah. Anda boleh menjalankan server pembangunan melalui pakej Node.js ServBay, kemudian mengkonfigurasi reverse proxy untuk pembangunan dan debugging di bawah domain tersuai dan HTTPS. Apabila siap, bina dan hasilkan fail statik, lalu preview secara lokal menggunakan fungsi laman statik ServBay yang berprestasi tinggi. Workflow ini mengoptimumkan kemudahan dan keupayaan ServBay sambil memudahkan proses pembangunan serta ujian projek frontend lokal anda. Semoga panduan ini membantu anda memanfaatkan ServBay sepenuhnya untuk pembangunan Nuxt.js!