WSA Project Document（中文）

cn768
156 阅读4分钟

项目文档：如何利用 i18n 设置国际化

英文文档

WSA Project Document(English)

目录

  1. 介绍
  2. 安装与配置
  3. 文件结构
  4. 添加新语言
  5. 在组件中使用 i18n
  6. 切换语言
  7. 注意事项

介绍

本项目采用 Vue 3 结合 vue-i18n 插件，实现了多语言国际化支持。通过配置多语言资源文件，可以轻松实现项目中的文本在不同语言之间的切换。

安装与配置

安装依赖

首先，安装 vue-i18n 依赖：

npm install vue-i18n

配置 i18n

在项目的根目录中创建一个 locales 目录，并在其中创建一个 index.ts 文件，用于初始化 i18n 配置。

目录结构示例

front-end/src/
├── locales/
│   ├── index.ts
│   ├── en.ts
│   ├── zh.ts
│   └── cy.ts
└── main.ts

初始化 i18n 配置

在 src/locales/index.ts 中：

import { createI18n } from 'vue-i18n';
import en from './en';
import zh from './zh';
import cy from './cy';

const messages = {
  en,
  zh,
  cy,
};

const i18n = createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages,
});

export default i18n;

在 src/main.ts 中引入 i18n 并挂载：

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './locales/index';

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

文件结构

语言资源文件(项目）

在 src/locales 目录下创建语言资源文件，例如 en.ts、zh.ts 和 cy.ts。

示例：en.ts

import localeAdminHome from '../views/admin/locales/en'
import localeAdminEventApprove from '../views/admin/approve/locales/en'
const en = {
  appName: 'WSA Volunteer Hub',
  language: {
    chinese: 'Chinese',
    english: 'English',
    welsh: 'Welsh'
  },
  header: {
    actions: {
      locale: 'Language switched successfully'
    }
  },
  ...localeAdminHome,
  ...localeAdminEventApprove,
}
export { en }

注意：当需要引入页面语言文件时，使用import
import localeAdminHome from '../views/admin/locales/en'

并且添加到key对象en之中：
...localeAdminHome,

同理将相同的key添加到zh.ts, cy.ts

语言资源文件(页面）

在需要添加多语言的页面新增一个文件夹locales,里面放入需要翻译的语言文件。

image.png

示例：en.ts

export default {
  "home.userInformation": "User Information",
  "home.username": "Username",
  "home.role": "Role",
  "home.lastLoginTime": "Last Login Time",
  "home.lastLoginLocation": "Last Login Location",
  // other key-value pairs
};

示例：zh.ts

export default {
  "home.userInformation": "用户信息",
  "home.username": "用户名",
  "home.role": "角色",
  "home.lastLoginTime": "最后登录时间",
  "home.lastLoginLocation": "最后登录地点",
  // other key-value pairs
};

示例：cy.ts

export default {
  "home.userInformation": "Gwybodaeth Defnyddiwr",
  "home.username": "Enw defnyddiwr",
  "home.role": "Rôl",
  "home.lastLoginTime": "Amser Mewngofnodi Olaf",
  "home.lastLoginLocation": "Lleoliad Mewngofnodi Olaf",
  // other key-value pairs
};

添加新语言

要添加新语言：

  1. 在 src/locales 目录下创建对应语言的文件，例如 fr.ts。
  2. 在 index.ts 文件中引入新语言并添加到 messages 对象中。

例如，添加法语支持：

src/locales/fr.ts

export default {
  "home.userInformation": "Informations utilisateur",
  "home.username": "Nom d'utilisateur",
  "home.role": "Rôle",
  "home.lastLoginTime": "Dernière connexion",
  "home.lastLoginLocation": "Dernier lieu de connexion",
  // other key-value pairs
};

修改 src/locales/index.ts

import { createI18n } from 'vue-i18n';
import en from './en';
import zh from './zh';
import cy from './cy';
import fr from './fr'; // 新添加

const messages = {
  en,
  zh,
  cy,
  fr, // 新添加
};

const i18n = createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages,
});

export default i18n;

在组件中使用 i18n

在 Vue 组件中使用 $t 方法来获取翻译文本。

示例

Home.vue

<template>
  <div>
    <h1>{{ $t('home.userInformation') }}</h1>
    <p>{{ $t('home.username') }}: {{ username }}</p>
    <p>{{ $t('home.role') }}: {{ role }}</p>
    <p>{{ $t('home.lastLoginTime') }}: {{ lastLoginTime }}</p>
    <p>{{ $t('home.lastLoginLocation') }}: {{ lastLoginLocation }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('John Doe');
const role = ref('Admin');
const lastLoginTime = ref('2024-03-24 12:00:00');
const lastLoginLocation = ref('Cardiff');
</script>

切换语言

项目提供了组件 changeLanguage.vue 进行语言切换。

示例

语言切换组件 changeLanguage.vue

以下是 changeLanguage.vue 文件的内容，该组件用于切换语言：

<template>
  <div class="custom-container">
    <img :src="flagIcon" class="language-icon" alt="language icon" />
    <el-select class="custom-select" v-model="lang" @change="changeLocale" popper-class="custom-popper">
      <el-option :label="t('language.chinese')" value="zh" />
      <el-option :label="t('language.english')" value="en" />
      <el-option :label="t('language.welsh')" value="cy" />
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance() as any;
const { t } = useI18n();

const lang = ref(localStorage.getItem('lang') || 'zh');

const currentLocale = computed(() => {
  return proxy.$i18n.locale;
});

import cnIcon from '../../assets/cn-icon.png';
import ukIcon from '../../assets/uk-icon.png';
import cyIcon from '../../assets/cy-icon.png';

const flagIcons: { [key: string]: string } = {
  zh: cnIcon,
  en: ukIcon,
  cy: cyIcon,
};

const flagIcon = computed(() => {
  return flagIcons[lang.value];
});

const changeLocale = (locale: string) => {
  proxy.$i18n.locale = locale;
  localStorage.setItem('lang', locale);
  ElMessage.success(t('header.actions.locale'));
};

changeLocale(lang.value);
</script>

<style scoped>
...
</style>

使用 changeLanguage.vue 组件

在需要切换语言的页面中，引入并使用 changeLanguage.vue 组件：

示例：在 Home.vue 中使用

<template>
  <div>
    <changeLanguage />
    <!-- 其他内容 -->
  </div>
</template>

<script setup>
import changeLanguage from './components/changeLanguage.vue';
</script>

通过以上配置，你可以在项目中方便地切换语言，并确保所有组件中的文本内容根据所选语言动态更新。

注意事项

  1. 确保所有文本都通过 $t 方法引用，这样才能保证国际化的一致性。
  2. 定义新的语言键时，保持键的命名规则一致，易于管理。
  3. 定期更新语言资源文件，确保翻译的准确性和完整性。

通过上述步骤和配置，你可以在项目中实现完善的国际化支持，并方便地添加和管理多种语言。

avatar
文章
阅读
粉丝