【功能实现】React和Vue实现国际化

国际化插件

react i18next

安装依赖

// 安装 react-i18next
npm install react-i18next i18next i18next-browser-languagedetector

配置语言

在src目录下,创建locales目录,并新建src/locales/en.json和src/locales/zh.json

内容如下:

// src/locales/en.json
{
    "hello":"hello",
    "world":"world"
}

// src/locales/zh.json
{
    "hello":"您好",
    "world":"世界"
}

配置

在 src 目录下新建一个 i18n.js 文件，引入国际化文件

import i18n from "i18next";
import enUsTrans from "./locales/en.json";
import zhCnTrans from "./locales/zh.json";
import {
  initReactI18next
} from 'react-i18next';

i18n
.use(initReactI18next)
.init({
  resources: {
    en: {
      translation: enUsTrans,
    },
    zh: {
      translation: zhCnTrans,
    },
  },
  //默认语言
  fallbackLng: "zh",
  debug: false,
  interpolation: {
    escapeValue: false,
  },
})


export default i18n;

基本使用

import './i18n';
import { useTranslation } from 'react-i18next'

function App() {
  const { t } = useTranslation();
  return (
    <div className="App">
      <p>{t('hello')}</p>
	  <p>{t('world')}</p>
    </div>
  );
}

export default App;

切换语言

i18next.changeLanguage()

<button οnclick={i18next.changeLanguage('en')}>
    english
  </button>
  <button οnclick={i18next.changeLanguage('de')}>
    german
  </button>
  <div id="output" />

vue3 vue-i18n

安装依赖

npm install vue-i18n

配置文件

src目录下创建locales文件夹,其中包含 en.js zh.js 和 index.js

// index.js
import { createI18n } from "vue-i18n";
import zh from "./zh";
import en from "./en";

const messages = {
  en,
  zh,
};
// const language = (navigator.language || "en").toLocaleLowerCase(); // 这是获取浏览器的语言
const i18n = createI18n({
  //   locale: localStorage.getItem("lang") || language.split("-")[0] || "en", // 首先从缓存里拿，没有的话就用浏览器语言，
  locale: localStorage.getItem("lang"),
  //   locale: "zh",1
  legacy: false, //处理报错Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
  //   fallbackLocale: "zh", // 设置备用语言
  fallbackLocale: "en", // 设置备用语言
  messages,
});

export default i18n;

// en.js
export default {
  login: {
    login: "login",
    userName: "userName",
    password: "password",
  },
};

// zh.js
export default {
  login: {
    login: "登录",
    userName: "用户名",
    password: "密码",
  },
};

在 main.js 下引入 并注册

import i18n from "./locales";
app.use(i18n);

基本使用

• 标签内部 v-t
• 插值 $t函数

<template>
  <div class="menu">
    <div>
      {{ $t("login.userName") }}
    </div>
    <div v-t="'login.password'"></div>
  </div>
</template>

<script setup>
// import { reactive } from "vue";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
</script>

切换语言

<template>
  <div class="menu">
    <div class="menu-item" @click="changeLang('en')">English</div>
    <div class="menu-item" @click="changeLang('zh')">中文</div>
    <div>
      {{ $t("login.userName") }}
    </div>
    <div v-t="'login.password'"></div>
  </div>
</template>

<script setup>
// import { reactive } from "vue";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
console.log(t("login.useName"));
const changeLang = (lang) => {
  locale.value = lang;
  localStorage.setItem("lang", lang);
};
</script>