vue项目国际化
1、安装插件
# 如果你是Vite玩家（比如Vue3项目）
npm install vite-auto-i18n-plugin --save-dev
# 如果你是Webpack钉子户（比如React老项目）
npm install webpack-auto-i18n-plugin --save-dev
2、配置插件
vue3+vite
// vite.config.js
import { defineConfig } from 'vite';
import vitePluginAutoI18n from 'vite-auto-i18n-plugin';
export default defineConfig({
plugins: [
vue(),
vitePluginAutoI18n({
targetLangList: ['en', 'ja', 'ko'], // 要卷就卷8国语言！
translator: new YoudaoTranslator({ // 用有道！不用翻墙！
appId: '你的白嫖ID', // 去官网申请，10秒搞定
appKey: '你的密钥' // 别用示例里的，会炸！
})
})
]
});
3、注入配置
在项目入口文件插入
// 这是插件的生命线！必须放在最前面！
import '../lang/index.js'; // 运行插件之后会自动生成引入即可
输入npm run dev，控制台开始疯狂输出：
[插件日志] 检测到中文文本："登录" → 生成哈希键：a1b2c3
[插件日志] 调用有道翻译："登录" → 英文：Login，日文：ログイン...
[插件日志] 生成文件：lang/index.json（翻译の圣杯）
突然！页面白屏了！
别慌！这是插件在首次翻译时需要生成文件，解决方法：
- 立即执行一次
npm run build（让插件提前生成所有翻译） - 再次
npm run dev→ 页面加载如德芙般丝滑
react项目国际化
1、安装插件
基础插件
npm install i18next
react项目插件
npm install react-i18next
预解析json文件插件
npm install i18next-resources-to-backend
2、添加多语言配置文件
目录
lang
|----sc
|---user.json
|---translate.ts
|----en
|---user.json
|---translate.ts
|----tc-hk
|---user.json
|---translate.ts
|----tc-tw
|---user.json
|---translate.ts
其中translate.ts主要用于模块化配置：
import user from './user.json';
export default {
user
}
配置json文件
{
"name":"张三",
"auth":{
"process":"审核中",
"access":"审核通过"
}
}
3、封装插件配置
3-1、多语言站点一般根据链接参数比如xxx.com?lang=en表示当前应该展示的语言类型；
3-2、如果没有lang参数，可以根据浏览器指定的语言类型来判断
const navigatorLang = navigator.language.toLocaleLowerCase()
3-3、通用封装
import i18next from 'i18next';
import { initReactI18next, useTranslation } from 'react-i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
const LANGUAGE = {
SC: 'sc',
EN: 'en',
TC_HK: 'tcHk',
TC_TW: 'tcTw'
};
// 浏览器当前的语言类型
const navigatorLang = navigator.language.toLocaleLowerCase()
// 默认语言类型
let defaultLocale = LANGUAGE.TC_HK;
const getDefaultLan = () => {
// 优先根据链接上语言类型参数判断
const { lang } = window.location.query
if (lang){
defaultLocale = lang
return defaultLocale
}
// 再根据浏览器当前语言类型判断
if(navigatorLang.includes('en')){
defaultLocale = LANGUAGE.EN
}else if (navigatorLang.includes('zh-hk')){
defaultLocale = LANGUAGE.TC_HK
}else if (navigatorLang.includes('zh-tw')){
defaultLocale = LANGUAGE.TC_TW
}
return defaultLocale
}
// 所有配置选项: https://www.i18next.com/overview/configuration-options
i18next
.use(initReactI18next)
.use(
resourcesToBackend((language, namespace) => {
// 动态import无法使用变量拼接
const cb = new Map([
[LANGUAGE.TC_HK, () => import('./lang/tc-hk/translation') as any],
[LANGUAGE.TC_TW, () => import('./lang/tc-tw/translation')],
[LANGUAGE.EN, () => import('./lang/en/translation')],
[LANGUAGE.SC, () => import('./lang/sc/translation')]
]).get(language)
return cb && cb()
})
)
.init({
// resources,
fallbackLng: defaultLocale,
lng: defaultLocale,
interpolation: {
escapeValue: false // not needed for react as it escapes by default
}
})
const { t, language: currentLocale = defaultLocale } = i18next;
export { t, useTranslation, currentLocale, defaultLocale };
export default i18next;
4、使用
组件中使用
import { useTranslation } from '@/utils/i18n'
export const Page = props =>{
// 取自定义json文件名作为前缀keyPrefix
const { t } = useTranslation('translation', { keyPrefix: 'user' })
return (<div>{t('name')}</div>)
}
组件外使用
import { useTranslation, t } from '@/utils/i18n'
const map = {
process: t('user.auth.process'),
access: t('user.auth.access')
}
