title | description |
---|---|
Perintah dan Penerapan (Deployment) |
Nuxt.js hadir dengan seperangkat perintah yang berguna, baik untuk tujuan pengembangan maupun produksi. |
Nuxt.js hadir dengan seperangkat perintah yang berguna, baik untuk tujuan pengembangan maupun produksi.
Perintah | Penjelasan |
---|---|
nuxt | Meluncurkan server pengembangan (development) di localhost:3000 dengan hot-reload. |
nuxt build | Membangun (build) aplikasi Anda dengan webpack dan minify JS & CSS (untuk produksi). |
nuxt start | Menjalankan server dalam mode produksi (setelah menjalankan nuxt build ). |
nuxt generate | Membangun aplikasi dan membuat setiap rute sebagai file HTML (digunakan untuk hosting statis). |
Anda dapat menggunakan --help
dengan perintah apapun untuk mendapatkan penggunaan secara rinci. Argumen umum sebagai berikut:
--config-file
atau-c
: menentukan path ke filenuxt.config.js
.--spa
atau-s
: Menjalankan perintah dalam mode SPA dengan menonaktifkan rendering sisi-server (SSR).
Anda harus memasukkan perintah ini ke dalam package.json
:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}
Kemudian, Anda bisa menjalankan perintah Anda melalui npm run <command>
(contoh : npm run dev
).
Pro tip: untuk menyampaikan argumen kepada perintah NPM, Anda perlu nama script ekstra berupa --
(contoh: npm run dev -- --spa
).
Untuk meluncurkan Nuxt dalam mode pengembangan dengan hot reloading:
nuxt
// OR
npm run dev
Nuxt.js memungkinkan Anda memilih antara tiga mode untuk menerapkan aplikasi Anda: Server Rendered, SPA atau Static Generated.
Alih-alih menjalankan nuxt
untuk menyebarkan (deploy), Anda mungkin ingin membangun (build) terlebih dahulu. Oleh karena itu, membangun (build) dan memulai (start) adalah perintah yang terpisah:
nuxt build
nuxt start
package.json
disarankan seperti berikut:
{
"name": "my-app",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}
Catatan: kami merekomendasikan menempatkan .nuxt
di .npmignore
atau .gitignore
.
Nuxt.js memberi Anda kemampuan untuk meng-host aplikasi web Anda pada hosting statis manapun.
Untuk menghasilkan aplikasi web kita menjadi file statis:
npm run generate
Ia akan membuat folder dist
dengan segala sesuatu di dalamnya siap untuk digunakan pada situs hosting statis.
Jika Anda memiliki proyek dengan rute dinamis, lihat konfigurasi generate untuk memberi tahu Nuxt.js cara menghasilkan rute dinamis ini.
Saat membuat aplikasi web Anda dengan nuxt generate
, konteks yang diberikan ke data() dan fetch() tidak akan memiliki req
dan res
.
nuxt generate
masih membutuhkan mesin SSR selama membangun (build) atau menghasilkan (generate), sembari kita mendapatkan pra-render semua halaman kita, dan mendapat SEO yang tinggi dan skor pemuatan halaman (page load score). Konten dihasilkan pada waktu pembuatan. Misalnya, kita tidak dapat menggunakannya untuk aplikasi yang kontennya bergantung pada autentikasi pengguna atau API waktu-nyata (setidaknya untuk muatan pertama).
Ide SPA itu sederhana! Saat mode SPA diaktifkan menggunakan mode: 'spa'
atau flag --spa
, dan kita jalankan build, generation otomatis dimulai setelah build. Generasi ini berisi meta yang umum dan tautan sumber daya (resource), namun bukan konten halaman.
Jadi, untuk penyebaran SPA, Anda harus melakukan hal berikut:
- Ubah
mode
dinuxt.config.js
kespa
. - Jalankan
npm run build
. - Sebarkan (deploy) folder
dist/
yang dibuat ke hosting statis Anda seperti Surge, GitHub Pages atau nginx.
Metode penyebaran lain adalah menggunakan Nuxt sebagai middleware dalam kerangka kerja (framework) sewaktu dalam mode spa
. Ini membantu mengurangi beban server dan menggunakan Nuxt dalam proyek di mana SSR tidak memungkinkan.
Lihat [Bagaimana cara deploy di Heroku?] (/faq/heroku-deployment) untuk contoh penyebaran ke host populer.
Lihat [Cara memasang di Halaman GitHub?] (/faq/github-pages) untuk detail lebih lanjut tentang cara menyebarkan ke Halaman GitHub.