Internationalization Configuration

The front-end project has integrated Vue i18n, which automatically requests the corresponding language text from the backend based on the current language during requests. The backend part is not explained here; interested parties can refer to the source code.

The front-end currently supports three language packs: Simplified Chinese, Traditional Chinese, and English.

Plugin Recommendations

• If you are using vscode, it is recommended to install i18n Ally.
• If you are using webStorm, it is recommended to install Easy i18n.

The above plugins can greatly assist you in perfecting the language packs.

Language Pack Definition

Must Read

Vue i18n supports two types of language packs: global language packs and local language packs. Local language packs, also known as in-file language packs, are only used within .vue files. Global language packs support .vue, .tsx, and .jsx file types.

Language packs are defined using yaml format syntax, which is much more comfortable to write than json.

If you need to extend other languages, pay attention to the format; otherwise, the defined language pack will not be found. The format is: language identifier[language name]

• en[English].yaml
• zh_CN[Simplified Chinese].yaml
• zh_TW[Traditional Chinese].yaml

Global Language Packs

Global language packs are stored in three forms, and they will all be automatically scanned and imported by the system:

• Under the src/locales directory
• Under the src/modules/<module name>/locales directory
• Under the src/plugins/<plugin name>/locales directory

Important Notes

The global language packs under modules and plugins must have the same file names as those under src/locales. Otherwise, the console will display warnings about missing key (which can be quite annoying).

Local Language Packs

All .vue files in the project support local language packs. You just need to define the i18n tag within the .vue file, as shown below:

<i18n lang="yaml">
zh_CN:
  hello: 你好
zh_TW:
  hello: 你好
en:
  hello: hello
</i18n>

<script setup lang="ts">
</script>

<template>
</template>

<style>
</style>

Usage

First, you can manually import Vue i18n yourself. Once you have the i18n object, you can use the t method of the i18n object to retrieve the text, as shown below:

import { i18n } from 'vue-i18n'

// Global mode
const { t } = i18n()

// Local mode
const { t } = i18n({
  inheritLocale: true,
  useScope: 'local',
})

However, the front-end project has already encapsulated a method to get the i18n object. You just need to use the useTrans() method within the setup function, as shown below:

// useTrans() is automatically imported
const trans = useTrans()

// useTrans() returns an object containing both global and local objects:
// trans.globalTrans and trans.localTrans

trans.globalTrans('global.title')
trans.localTrans('title')

// You can also use it directly; it will first look for the global key, and if not found, it will look for the local key
useTrans('title')

In addition, there is a useLocalTrans() method, which only returns the local i18n object and needs to be manually imported, as shown below:

import useLocalTrans from '@/hooks/useLocalTrans'

// Only looks for keys within this file
const t = useLocalTrans()

// Two ways to use it
t('title')
useLocalTrans('title')