Vue Academy · Pelajaran

Konfigurasi CLI dan Plugin

Konfigurasikan CLI dan tambahkan plugin untuk memperluas proyek Anda.

Konfigurasi CLI dan Plugin adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Mengonfigurasi Proses Pembangunan

Vue CLI dan Vite memungkinkan Anda menyesuaikan proses pembangunan melalui berkas konfigurasi.

Vue CLI menggunakan vue.config.js
Vite menggunakan vite.config.js

Di sini Anda menambahkan pengaya, menetapkan alias, mengonfigurasi server pengembangan, dan lainnya.

Dasar-Dasar vite.config.js

vite.config.js yang umum mengimpor pengaya Vue dan mengekspor objek konfigurasi.

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

Dasar-Dasar vue.config.js

Untuk proyek Vue CLI, vue.config.js mengekspor konfigurasi dengan cara yang sama.

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  devServer: {
    port: 8080
  }
})

Menambahkan Pengaya

Pengaya memperluas proses pembangunan dengan kemampuan baru.

Instal dengan npm
Impor ke dalam berkas konfigurasi
Tambahkan ke larik pengaya

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

Variabel Lingkungan

Simpan konfigurasi yang berubah antara lingkungan di dalam berkas .env.

.env dimuat di semua tempat
.env.development hanya untuk pengembangan
.env.production untuk pembangunan produksi

Mendefinisikan Variabel Lingkungan

Di Vite, variabel harus diawali dengan VITE_ agar tersedia untuk kode klien Anda.

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

Membaca Variabel Lingkungan

Akses variabel yang tersedia melalui import.meta.env di Vite.

const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)
// https://api.example.com

Catatan Keamanan tentang Variabel Lingkungan

Segala sesuatu yang tersedia untuk kode klien akan terlihat di peramban.

Jangan pernah menaruh rahasia seperti kunci API pribadi dalam variabel VITE_
Hanya konfigurasi publik yang tidak sensitif yang boleh ditempatkan di sini
Simpan rahasia sebenarnya di server

Alias Jalur

Alias mempersingkat jalur impor. Alias yang umum memetakan @ ke direktori src.

Dengan begitu, Anda terhindar dari jalur relatif yang rapuh seperti ../../components.

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

Menggunakan Alias

Setelah dikonfigurasi, impor dari @/, bukan dari jalur relatif.

// Without alias
import Button from "../../components/Button.vue"

// With @ alias
import Button from "@/components/Button.vue"

Opsi Server Pengembangan

Berkas konfigurasi juga menyesuaikan server pengembangan:

port port yang digunakan untuk mendengarkan
open membuka peramban secara otomatis
proxy meneruskan permintaan API untuk menghindari CORS

export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

Pemeriksaan Singkat

Uji pemahaman Anda tentang konfigurasi Vite.

Rangkuman: Konfigurasi dan Pengaya

Anda telah mempelajari cara mengonfigurasi proyek Vue:

vite.config.js atau vue.config.js menyimpan pengaturan
Tambahkan pengaya ke larik pengaya
Gunakan berkas .env dengan awalan VITE_
Baca variabel tersebut melalui import.meta.env
Tetapkan alias @ untuk impor yang rapi

Berikutnya: sintaks templat dan pengikatan data.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Konfigurasi CLI dan Plugin” gratis?

Ya — teks lengkap “Konfigurasi CLI dan Plugin” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Konfigurasi CLI dan Plugin”?

Konfigurasikan CLI dan tambahkan plugin untuk memperluas proyek Anda. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.

Berapa lama pelajaran “Konfigurasi CLI dan Plugin” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy