国际化插件
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>