网站推广的心得,网站服务器能更换吗,为什么平面设计最后都转行了,wordpress 仿 主题下载前端多语言目前常用i18n实现
一、react
1.安装依赖
npm install react-i18next i18next --save2.创建配置文件
src/i18n config.ts#xff1a;对 i18n 进行初始化操作及插件配置 en.json#xff1a;英文语言配置文件 zh.json#xff1a;中文语言配置文件
config.ts
im…前端多语言目前常用i18n实现
一、react
1.安装依赖
npm install react-i18next i18next --save2.创建配置文件
src/i18n config.ts对 i18n 进行初始化操作及插件配置 en.json英文语言配置文件 zh.json中文语言配置文件
config.ts
import i18n from i18next;
import { initReactI18next } from react-i18next;
import translation_en from ./en.json;
import translation_zh from ./zh.json;const resources {en: {translation: translation_en,},zh: {translation: translation_zh,},
};i18n.use(initReactI18next).init({resources,// 默认语言 zh/en 中文/英文lng: zh,interpolation: {escapeValue: false,},
});export default i18n;zh.json
{language:语言,switch:选择,
}en.json
{language:Language,switch:Switch,
}app.tsx引入
// 引用配置文件
import /i18n/config;
3.使用
函数组件使用
// Page1 函数式组件
import React from react;
// 引入 useTranslation
import { useTranslation } from react-i18next;const Page1: React.FC () {const { t } useTranslation();return (divp这是Page1/pp{t(language)}/p/div);
};export default Page1;
类组件(使用withTranslation 高阶函数(HOC) 来完成语言配置的数据注入)
// Page2 类组件
import React from react;
// 引入HOC高阶函数 withTranslation 和 i18n 的ts类型定义 WithTranslation
import { withTranslation, WithTranslation } from react-i18next;class ClassComponent extends React.ComponentWithTranslation {render() {const { t } this.props;return (divp{t(language)}/p/div);}
}
// withTranslation 完成语言配置数据注入
export const Page2 withTranslation()(ClassComponent);
切换语言
// 函数式组件
import React from react;
import { useTranslation, Trans } from react-i18next;const Page1: React.FC () {const { t, i18n } useTranslation();return (divbutton onClick{() i18n.changeLanguage(i18n.language en ? zh : en)}{i18n.language en ? zh : en}/buttonp{t(language)}/p/div);
};export default Page1;// 类式组件
import i18n from i18next;const changeLanguage (val) {i18n.changeLanguage(val); // 传入 en / zh
};二、vue
1.安装依赖
pnpm add vue-i18n2.创建配置文件
src/i18n config.ts对 i18n 进行初始化操作及插件配置 en.json英文语言配置文件 zh.json中文语言配置文件
config.ts
import { createI18n } from vue-i18n // 引入vue-i18n组件import en from ./en.json
import zh from ./zh.jsonexport const getCurrLang () {// const localLang navigator.language.split(-)[0]; // 浏览器语言const { lang } JSON.parse(localStorage.getItem(lang) ?? {}) // 本地存储语言return lang || zh
}//注册i18n实例并引入语言文件
const i18n createI18n({legacy: false,locale: getCurrLang(), // 语言标识fallbackLocale: zh, //没有英文的时候默认中文语言messages: {zh: { ...routerLang.zh, ...zh },en: { ...routerLang.en, ...en }}
})
export default i18nzh.json
{language:语言,switch:选择,
}en.json
{language:Language,switch:Switch,
}main.ts引入 import i18n, { getCurrLang } from /i18n;
const app createApp(App)
app.use(i18n)
app.use(ElementPlus, {locale: getCurrLang() zh ? elementplusZhCn : elementplusEn,
})
app.mount(#app)3.使用
templatediv$t(language)/divdiv clickhandleLangClick$t(Switch)/div
/template...const i18n useI18n()
const { t } i18nconst handleLangClick () {i18n.locale.value i18n.locale.value en ? zh : en}
const langList computed(() [{ label: zh, value: t(components.layout-head.228891-3) },{ label: en, value: t(components.layout-head.228891-4) }
])三、插件du-i18n、i18n Ally
看下面博客 https://blog.csdn.net/m0_55967670/article/details/140876053?spm1001.2014.3001.5501
