0Pricing
Vue Academy · บทเรียน

การกำหนดค่า CLI และปลั๊กอิน

กำหนดค่า CLI และเพิ่มปลั๊กอินเพื่อขยายโปรเจกต์ของคุณ

การกำหนดค่า CLI และปลั๊กอิน เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

การกำหนดค่าการสร้าง

ทั้ง Vue CLI และ Vite ให้คุณปรับแต่งการสร้างผ่านไฟล์กำหนดค่าได้

  • Vue CLI ใช้ vue.config.js
  • Vite ใช้ vite.config.js

ในไฟล์นี้คุณสามารถเพิ่มปลั๊กอิน ตั้งค่านามแฝง กำหนดค่าเซิร์ฟเวอร์พัฒนา และทำสิ่งอื่น ๆ ได้

พื้นฐานของ vite.config.js

vite.config.js โดยทั่วไปจะนำเข้าปลั๊กอิน Vue และส่งออกออบเจ็กต์การกำหนดค่า

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

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

พื้นฐานของ vue.config.js

สำหรับโปรเจกต์ Vue CLI vue.config.js จะส่งออกการกำหนดค่าด้วยวิธีเดียวกัน

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

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

การเพิ่มปลั๊กอิน

ปลั๊กอิน ขยายการสร้างด้วยความสามารถใหม่ ๆ

  • ติดตั้งด้วย npm
  • นำเข้าในไฟล์กำหนดค่า
  • เพิ่มลงในอาร์เรย์ปลั๊กอิน
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

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

ตัวแปรสภาพแวดล้อม

เก็บการกำหนดค่าที่เปลี่ยนแปลงไปตามสภาพแวดล้อมไว้ในไฟล์ .env

  • .env โหลดในทุกสภาพแวดล้อม
  • .env.development ใช้สำหรับการพัฒนาเท่านั้น
  • .env.production ใช้สำหรับการสร้างในสภาพแวดล้อมจริง

การกำหนดตัวแปรสภาพแวดล้อม

ใน Vite ตัวแปรต้องมีคำนำหน้า VITE_ จึงจะถูกเปิดเผยต่อโค้ดฝั่งไคลเอ็นต์

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

การอ่านตัวแปรสภาพแวดล้อม

เข้าถึงตัวแปรที่เปิดเผยได้ผ่าน import.meta.env ใน Vite

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

ข้อควรระวังด้านความปลอดภัยของตัวแปรสภาพแวดล้อม

ทุกสิ่งที่เปิดเผยต่อโค้ดฝั่งไคลเอ็นต์จะ มองเห็นได้ในเบราว์เซอร์

  • อย่าใส่ข้อมูลลับ เช่น คีย์ API ส่วนตัว ไว้ในตัวแปร VITE_ เด็ดขาด
  • ควรเก็บไว้ที่นี่เฉพาะการกำหนดค่าสาธารณะที่ไม่ละเอียดอ่อน
  • เก็บข้อมูลลับจริงไว้บนเซิร์ฟเวอร์

นามแฝงเส้นทาง

นามแฝงช่วยย่อเส้นทางการนำเข้า นามแฝงที่ใช้กันทั่วไปจะแมป @ ไปยังโฟลเดอร์ src

วิธีนี้ช่วยหลีกเลี่ยงเส้นทางสัมพัทธ์ที่เปราะบาง เช่น ../../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))
    }
  }
})

การใช้นามแฝง

เมื่อกำหนดค่าแล้ว ให้นำเข้าจาก @/ แทนเส้นทางสัมพัทธ์

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

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

ตัวเลือกเซิร์ฟเวอร์พัฒนา

ไฟล์กำหนดค่ายังใช้ปรับเซิร์ฟเวอร์พัฒนาได้ด้วย:

  • port พอร์ตที่จะรับฟัง
  • open เปิดเบราว์เซอร์โดยอัตโนมัติ
  • proxy ส่งต่อคำขอ API เพื่อหลีกเลี่ยง CORS
export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับการกำหนดค่า Vite

สรุป: การกำหนดค่าและปลั๊กอิน

คุณได้เรียนรู้วิธีกำหนดค่าโปรเจกต์ Vue:

  • vite.config.js หรือ vue.config.js เก็บการตั้งค่า
  • เพิ่ม ปลั๊กอิน ลงในอาร์เรย์ปลั๊กอิน
  • ใช้ไฟล์ .env พร้อมคำนำหน้า VITE_
  • อ่านค่าเหล่านี้ผ่าน import.meta.env
  • ตั้งค่านามแฝง @ เพื่อให้การนำเข้าอ่านง่าย

ถัดไป: ไวยากรณ์เทมเพลตและการผูกข้อมูล

คำถามที่พบบ่อย

บทเรียน “การกำหนดค่า CLI และปลั๊กอิน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การกำหนดค่า CLI และปลั๊กอิน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดค่า CLI และปลั๊กอิน”

กำหนดค่า CLI และเพิ่มปลั๊กอินเพื่อขยายโปรเจกต์ของคุณ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “การกำหนดค่า CLI และปลั๊กอิน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การติดตั้ง Vue CLI
  2. โครงสร้างโปรเจกต์ที่สร้างขึ้น
  3. การกำหนดค่า CLI และปลั๊กอิน
← กลับไปที่ Vue Academy