i18n国际化使用

asuka613

已于 2024-01-11 11:47:57 修改

阅读量175

点赞数

分类专栏：前端知识散记文章标签： vue.js javascript 前端

于 2023-12-29 14:51:07 首次发布

本文链接：https://blog.csdn.net/qq_45645848/article/details/133713646

版权

前端知识散记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一、介绍

国际化是指项目能够根据不同国家的语言进行转换，便于不同国家的用户使用。Vue I18 是 Vue.js 的国际化插件，它可以轻松地将一些本地化功能集成到应用程序中。

i18n 的全程是 internationalization，插件名取了首字母 i 和尾字母 n，中间一共有 18 个字母，所以组合起来就叫 i18n。

二、插件基本思路

1. 定义语言包：需要几种语言展示，就定义几个语言包。

2. 组合语言包对象：创建对象，对语言包进行组合，对象的 key 为语言包引用，值为语言包对象。

3. 创建实例：创建 vue-i18n 类的对象，添加 message 和 locale 属性。4. 挂载：挂载创建的实例对象。

三、适用框架

vue-i18n 作为国际化插件，它主要有两个版本：v8 和 v9。v8 版本适用于 Vue2 框架，v9 版本适用于 Vue3 框架。具体区别可以查看官网，以下内容均在 Vue3 中使用。

四、Vue3 中使用

1.安装插件

npm install vue-i18n --save

2.定义和组合语言包

先定义常用的两个语言包：

// src/langurage/en.js 
// 定义英文语言包对象
export default {
  navigateBar: {
    hotspot: 'Hotspot',
    experience: 'Experience',
    focus: 'Focus',
    recommend: 'Recommend'
  },
  tabs: {
    work: 'Work',
    private: 'Private',
    collect: 'Collect',
    like: 'Like'
  }
}

// src/langurage/zh.js 
// 定义中文语言包对象
export default {
  navigateBar: {
    hotspot: '热点',
    experience: '经验',
    focus: '关注',
    recommend: '推荐'
  },
  tabs: {
    work: '作品',
    private: '私密',
    collect: '收藏',
    like: '喜欢'
  }
}

组合语言包对象：

// src/main.js
const message = {
    en,
    zh
}

3.引入插件并创建 i18n 实例

// src/main.js
import { createI18n } from 'vue-i18n';
 
const i18n = createI18n({
  legacy: false,  // 设置为 false，启用 composition API 模式
  messages,
  locale: 'en'  // 设置默认语言
})

注意：在创建实例时，一定要将 legacy 属性设置为 false，因为 legacy 默认为 true，它支持使用 Vue2 框架中的 Options API，如果要在 Vue3 更好的使用 Composition API 模式，那么就需要将此属性手动设置为 false。

4.挂载实例对象

// src/main.js
import { createApp } from 'vue';
const app = createApp(App);
app.use(i18n);

main.js 文件中的完整代码：

import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';
import en from './langurage/en';
import zh from './langurage/zh';
// 组合语言包对象
const messages = {
  en,
  zh
}
// 创建实例对象
const i18n = createI18n({
  legacy: false,  // 设置为 false，启用 composition API 模式
  messages,
  locale: 'en'
})
// 创建 Vue 实例
const app = createApp(App);
// 注册对象
app.use(i18n);
// 挂载到 Dom 元素中
app.mount('#app');

在组件中使用：

<template>
    <div>
        <ul>
            <li>{{ $t("navigateBar.hotspot") }}</li>
            <li>{{ $t("navigateBar.experience") }}</li>
            <li>{{ $t("navigateBar.focus") }}</li>
            <li>{{ $t("navigateBar.recommend") }}</li>
        </ul>
        <ol>
            <li>{{ $t("tabs.work") }}</li>
            <li>{{ $t("tabs.private") }}</li>
            <li>{{ $t("tabs.collect") }}</li>
            <li>{{ $t("tabs.like") }}</li>
        </ol>
    <div>
</template>

在步骤 2 中定义的语言包是对象形式的，如果你定义的是简单的属性形式，要注意在组件中使用时的形式。

5.动态切换语言

想要切换语言时，修改 locale 属性就可以了。

获取浏览器当前使用的语言

如果一开始想使用浏览器中默认的语言，那么将 locale 属性改成如下即可：

const i18n = createI18n({
  messages,
  locale: navigator.language // 获取浏览器的语言
})

按钮切换

添加按钮切换语言时，Vue2 和 Vue3 的修改方式是不同的，在 Vue2 中使用全局的 this.$i18n.locale 就可以修改，但在 Vue3 中，需要 Hook 进行修改，如下所示：

<template>
    <div>
        <div>
            <button @click="changeLocale('zh')">切换为中文</button>
            <button @click="changeLocale('en')">切换为中文</button>
        </div>
        <ul>
            <li>{{ $t("navigateBar.hotspot") }}</li>
            <li>{{ $t("navigateBar.experience") }}</li>
            <li>{{ $t("navigateBar.focus") }}</li>
            <li>{{ $t("navigateBar.recommend") }}</li>
        </ul>
        <ol>
            <li>{{ $t("tabs.work") }}</li>
            <li>{{ $t("tabs.private") }}</li>
            <li>{{ $t("tabs.collect") }}</li>
            <li>{{ $t("tabs.like") }}</li>
        </ol>
    <div>
</template>
 
<script setup>
import { useI18n } from "vue-i18n";
 
const { locale } = useI18n();
 
// 切换语言
const changeLocale = (lang) => {
  locale.value = lang;
};
</script>

五、在react中使用

1.安装插件

npm install react-i18next

2.配置文件

在src下新建i18n文件夹，以存放国际化相关配置，可根据需要添加相应的语言文件

2.1 新建config.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
//配置中文的配置文件
import translation_zh from './zh.json';
//配置英文的配置文件
import translation_en from './en.json';

const resources = {
  en: {
    translation: translation_en
  },
  zh: {
    translation: translation_zh
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'zh',
  interpolation: {
    escapeValue: false
  }
});

export default i18n;

2.2 语言文件示例

en.json

{
  "header": {
    "register": "Register",
    "signin": "Sign In",
    "home": "Home"
  },
  "footer": {
    "detail": "All rights reserved @ React"
  },
  "home": {
    "mainTip": "Im login page"
  },
  "content": {
    "description": "this is a chinese graph"
  }
}

zh.json

{
  "header": {
    "register": "注册",
    "signin": "登录",
    "home": "首页"
  },
  "footer": {
    "detail": "版权所有 @ React"
  },
  "home": {
    "mainTip": "我是登录页面"
  },
  "content": {
    "description": "这是个中文段落"
  }
}

3.详细使用

首先在index.jsx中引入国际化配置文件

import './i18n/config';

3.1 类（class）组件中使用

import React, { Component } from 'react';
import { withTranslation } from 'react-i18next';
class login extends Component {
  render() {
    const { t } = this.props;
    return (
      <div>
        <h1>{t('home.mainTip')}</h1>
      </div>
    );
  }
}
export default withTranslation()(login);

3.2 函数（function）组件或Hook中使用

import React from 'react';
import { useTranslation,Trans } from 'react-i18next';
function Example() {
  const { t, i18n } = useTranslation();
  return (
    <div>
    //第一种方式
      <p>{t('footer.detail')}</p>
    //第二种方式
      <li><Trans>home.new_arrival</Trans></li>
    </div>
  );
}
export default Example;

3.3 切换语言功能

import { Button } from "antd-mobile";
import { useTranslation, Trans } from "react-i18next";
const Lang = () => {
  const { i18n } = useTranslation();
  return (
    <Button
      onClick={() =>
        i18n?.changeLanguage(i18n?.language === "en" ? "zh" : "en")
      }
    >
      {i18n?.language === "en" ? "切换成中文" : "切换成英文"}
    </Button>
  );
};
export default Lang;

参考：

React功能篇 - 使用react-i18next进行国际化-CSDN博客

react使用i18next实现国际化_react i18n前端国际化-CSDN博客