i18n ใน vue js

VueJS

Created At : 2023-09-04 01:09

Views 👀 :

Internationalization (i18n) เป็นกระบวนการการพัฒนาแอปพลิเคชันที่ช่วยให้คุณสามารถแปลงและปรับเปลี่ยนข้อความและข้อมูลในแอปของคุณให้รองรับหลายภาษาและภาษาต่างๆ อย่างสามารถสลับภาษาได้ง่าย ใน Vue.js, คุณสามารถใช้โมดูลและเครื่องมือต่างๆ เพื่อดำเนินการ i18n ในแอปของคุณได้ง่ายมาก นี่คือขั้นตอนพื้นฐาน:

ติดตั้งและกำหนดค่า i18n Library:
- คุณสามารถใช้งาน i18n ใน Vue.js โดยใช้ไลบรารีเช่น “vue-i18n” หรือ “vue-intl” หรือสร้างระบบ i18n เอง. เลือกเครื่องมือที่ตรงกับความต้องการของคุณ.
ตัวอย่างการติดตั้ง vue-i18n:
1
npm install vue-i18n --save
สร้างไฟล์แปลภาษา:
- สร้างไฟล์ JSON หรือ JavaScript สำหรับแต่ละภาษาที่คุณต้องการให้แอปของคุณรองรับ. ไฟล์นี้จะเก็บข้อความและข้อมูลอื่น ๆ สำหรับแต่ละภาษา.
ตัวอย่างไฟล์แปลภาษา (th.json):
1
2
3
4
{
"greeting": "สวัสดี",
"welcome": "ยินดีต้อนรับสู่แอปของเรา"
}
สร้างไฟล์แปลภาษาอื่นๆ ตามภาษาที่คุณต้องการรองรับ (เช่น en.json, fr.json, es.json, ฯลฯ).

กำหนดค่า i18n ใน Vue.js:

นำเข้าและกำหนดค่า i18n ในคอมโพเนนต์หรือ main.js:

import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale: 'th', // ภาษาเริ่มต้น
  messages: {
    th: require('./locales/th.json'), // ไฟล์แปลภาษาสำหรับภาษาไทย
    // เพิ่มภาษาอื่นๆ ตามต้องการ
  }
});

const app = createApp(App);

app.use(i18n);

app.mount('#app');

ใช้งาน i18n ในคอมโพเนนต์ Vue:

ในคอมโพเนนต์ Vue ของคุณ, คุณสามารถใช้ i18n เพื่อแปลและแสดงข้อความตามภาษาที่กำหนด:

<template>
  <div>
    <p>{{ $t('greeting') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

<script>
export default {
  // โค้ดคอมโพเนนต์ Vue ที่อื่น ๆ
};
</script>

ในตัวอย่างนี้, $t('greeting') และ $t('welcome') จะแปลและแสดงข้อความตามภาษาปัจจุบันที่กำหนดใน i18n.

การสลับภาษา:
- คุณสามารถสร้างระบบสลับภาษาโดยใช้ตัวแปรสถานะหรือการควบคุมอื่น ๆ ในแอปของคุณเพื่อเปลี่ยนค่า locale ใน i18n เมื่อผู้ใช้เลือกภาษาใหม่.
การใช้งานการแปลเพิ่มเติม:
- หลายๆ ไลบรารี i18n มีความสามารถในการจัดการตัวแปรเวลา, การจัดการจำนวน, การใช้งานประโยคที่ซับซ้อน, การจัดการการตรวจสอบ, แ

ละฟังก์ชันอื่น ๆ สำหรับการแปล. ควรดูที่เอกสารของไลบรารีที่คุณใช้งานเพื่อเรียนรู้เพิ่มเติม.

นี่คือขั้นตอนพื้นฐานในการใช้งาน i18n ใน Vue.js คุณสามารถปรับแต่งและขยายความสามารถของระบบ i18n ในแอปของคุณตามความต้องการของคุณ.