前端多语言

前端多语言目前常用i18n实现

一、react

1.安装依赖

npm install react-i18next i18next --save

2.创建配置文件

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 (<div><p>这是Page1</p><p>{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.Component<WithTranslation> {render() {const { t } = this.props;return (<div><p>{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 (<div><button onClick={() => i18n.changeLanguage(i18n.language == 'en' ? 'zh' : 'en')}>{i18n.language == 'en' ? 'zh' : 'en'}</button><p>{t('language')}</p></div>);
};export default Page1;

//  类式组件
import i18n from 'i18next';const changeLanguage= (val) => {i18n.changeLanguage(val); // 传入 'en' / 'zh'
};

二、vue

1.安装依赖

pnpm add vue-i18n

2.创建配置文件

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.json'export 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 i18n

zh.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.使用

<template><div>$t('language')</div><div @click="handleLangClick">$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') }
])