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

การตั้งค่า vue-i18n และไฟล์ข้อความ

createI18n() ไฟล์ JSON ของ locale ไวยากรณ์ข้อความ {name} คีย์ซ้อน และ locale สำรอง

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

i18n คืออะไร

การทำให้รองรับหลายภาษา (i18n) คือการสร้าง app ให้สามารถแสดงข้อความได้หลายภาษา Vue I18n เป็นไลบรารีรูปแบบทางการสำหรับแปล app ที่สร้างด้วย Vue

แทนที่จะเขียนสตริงภาษาอังกฤษแบบตายตัว คุณจะค้นหาคีย์ซึ่งให้ค่าตามภาษาที่ใช้งานอยู่

การติดตั้ง Vue I18n

เพิ่มแพ็กเกจ สำหรับ Vue 3 ให้ใช้เวอร์ชัน 9 ขึ้นไป ซึ่งสร้างขึ้นบน API แบบการจัดองค์ประกอบ

// terminal
// npm install vue-i18n

ไฟล์ข้อความ

คำแปลจะอยู่ใน ออบเจ็กต์ข้อความ แยกกันตาม locale แต่ละคีย์จะจับคู่กับสตริงที่แปลแล้ว ให้เริ่มต้นด้วยภาษาอังกฤษ

const en = {
  greeting: "Hello",
  nav: {
    home: "Home",
    about: "About",
  },
}

การเพิ่ม locale ภาษาตุรกี

แต่ละ locale ใช้โครงสร้างคีย์เดียวกัน เพื่อให้ทุกคีย์มีอยู่ในทุกภาษา

const tr = {
  greeting: "Merhaba",
  nav: {
    home: "Ana Sayfa",
    about: "Hakkinda",
  },
}

การสร้างอินสแตนซ์ i18n

createI18n ใช้สร้างอินสแตนซ์ ให้ตั้งค่า locale (ภาษาที่ใช้งานอยู่), fallbackLocale (ภาษาที่ใช้เมื่อไม่มีคีย์) และแผนที่ messages

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en, tr },
})

เหตุใดจึงใช้ legacy: false

การตั้งค่า legacy: false จะเปิดใช้โหมด API แบบการจัดองค์ประกอบ ซึ่งเป็นโหมดที่ app Vue 3 สมัยใหม่ใช้ และทำให้ใช้คอมโพสเซเบิล useI18n ที่คุณจะได้เรียนในบทเรียนถัดไป

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  messages: { en, tr },
})

การลงทะเบียนกับ app

ติดตั้งอินสแตนซ์เป็นปลั๊กอินด้วย app.use(i18n) ทำให้ตัวช่วยแปลภาษาพร้อมใช้งานตลอดทั้งโครงสร้างส่วนประกอบ

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.use(i18n)
app.mount("#app")

การใช้ $t ในแม่แบบ

เมื่อติดตั้งแล้ว แม่แบบทุกแห่งสามารถเรียก $t(key) เพื่อค้นหาคำแปลใน locale ที่ใช้งานอยู่

<template>
  <h1>{{ $t("greeting") }}</h1>
  <a>{{ $t("nav.home") }}</a>
</template>

การทำงานของ fallbackLocale

หากไม่มีคีย์ใน locale ที่ใช้งานอยู่ Vue I18n จะเปลี่ยนไปใช้ fallbackLocale แทนการแสดงคีย์ดิบ วิธีนี้ช่วยให้ส่วนติดต่อผู้ใช้ยังดูเหมาะสมระหว่างที่กำลังดำเนินการแปล

// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English text

การแทนค่าด้วยตัวแทนค่า

ข้อความสามารถมีตัวแทนค่าที่ระบุชื่อไว้ในวงเล็บปีกกาได้ ให้ส่งค่าเป็นอาร์กิวเมนต์ที่สองเพื่อเติมค่าลงไป

const en = {
  welcome: "Welcome, {name}!",
}

// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"

การจัดระเบียบไฟล์ข้อความ

สำหรับ app จริง ให้เก็บแต่ละ locale ไว้ในไฟล์ของตนเอง (en.json, tr.json) แล้วนำเข้า วิธีนี้ช่วยให้จัดการคำแปลได้ง่ายและเปิดให้ผู้แปลทำงานแยกจากกันได้

// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"

createI18n({ locale: "en", messages: { en, tr } })

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

ตรวจสอบความเข้าใจของคุณเกี่ยวกับการตั้งค่า Vue I18n

สรุปทบทวน

คุณได้ตั้งค่า Vue I18n แล้ว:

  • i18n หมายถึงการแสดงข้อความหลายภาษาโดยค้นหาจากคีย์
  • กำหนดออบเจ็กต์ข้อความสำหรับแต่ละ locale โดยใช้โครงสร้างคีย์เดียวกัน
  • createI18n รับค่า locale, fallbackLocale และ messages ให้ใช้ legacy: false สำหรับโหมดการจัดองค์ประกอบ
  • ติดตั้งด้วย app.use(i18n) และแปลภาษาในแม่แบบด้วย $t(key)
  • ตัวแทนค่าอย่าง {name} จะถูกเติมค่าผ่านอาร์กิวเมนต์ที่สอง

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

บทเรียน “การตั้งค่า vue-i18n และไฟล์ข้อความ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า vue-i18n และไฟล์ข้อความ”

createI18n() ไฟล์ JSON ของ locale ไวยากรณ์ข้อความ {name} คีย์ซ้อน และ locale สำรอง คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การตั้งค่า vue-i18n และไฟล์ข้อความ” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การตั้งค่า vue-i18n และไฟล์ข้อความ
  2. คอมโพสิเบิล useI18n และฟังก์ชัน t()
  3. การผันรูปพหูพจน์และข้อความที่เชื่อมโยง
  4. การจัดรูปแบบตัวเลข วันที่ และสกุลเงิน
← กลับไปที่ Vue Academy