当前位置：首页 > news >正文

前端i18n实现中英文切换

news 2025/11/8 8:04:55

在前端项目中实现中英切换（国际化，i18n），核心思路是将页面中所有静态文本抽离为语言包，通过切换语言标识（如 zh-CN/en-US）动态渲染对应语言的文本。以下是具体实现方案，以 Vue 项目为例（其他框架思路类似）：

一、核心依赖

使用成熟的国际化库，Vue 项目推荐 vue-i18n（Vue2 用 vue-i18n@8.x，Vue3 用 vue-i18n@9.x），React 项目可用 react-i18next，原生 JS 可手动实现。

二、Vue 项目实现步骤（以 Vue2 + vue-i18n@8.x 为例）

1. 安装依赖

npm install vue-i18n@8.x --save
# 或 yarn add vue-i18n@8.x

2. 配置语言包

在项目中创建语言包目录（如 src/lang），分别定义中文（zh-CN.js）和英文（en-US.js）文本：

// src/lang/zh-CN.js
export default {common: {confirm: "确认",cancel: "取消",submit: "提交"},dashboard: {title: "交易仪表盘",successRate: "匹配成功率"},// 其他模块文本...
};// src/lang/en-US.js
export default {common: {confirm: "Confirm",cancel: "Cancel",submit: "Submit"},dashboard: {title: "Transaction Dashboard",successRate: "Matching Success Rate"},// 其他模块文本...
};

3. 初始化 i18n 实例

创建 src/lang/index.js 统一配置：

import Vue from "vue";
import VueI18n from "vue-i18n";
import zhCN from "./zh-CN";
import enUS from "./en-US";Vue.use(VueI18n);// 从本地存储获取默认语言（默认中文）
const locale = localStorage.getItem("language") || "zh-CN";const i18n = new VueI18n({locale, // 当前语言标识messages: {"zh-CN": zhCN,"en-US": enUS}
});export default i18n;

4. 注入 Vue 实例

在 main.js 中引入并挂载 i18n：

import Vue from "vue";
import App from "./App.vue";
import i18n from "./lang"; // 引入i18n配置new Vue({el: "#app",i18n, // 挂载到Vue实例render: h => h(App)
});

5. 在页面中使用

（1）模板中使用 `$t()` 方法：

<template><div><!-- 直接使用key --><h1>{{ $t("dashboard.title") }}</h1><p>{{ $t("dashboard.successRate") }}: 98%</p><!-- 按钮文本 --><el-button>{{ $t("common.confirm") }}</el-button><el-button>{{ $t("common.cancel") }}</el-button></div>
</template>

（2）JS 中使用 `this.$t()`：

methods: {showMessage() {this.$message.success(this.$t("common.submitSuccess"));}
}

（3）动态属性（如 placeholder）：

<el-input :placeholder="$t('common.enterContractId')"></el-input>

6. 实现语言切换功能

添加切换按钮，点击时修改 i18n.locale 并保存到本地存储：

<template><div class="language-switch"><el-button @click="switchLang('zh-CN')">中文</el-button><el-button @click="switchLang('en-US')">English</el-button></div>
</template><script>
export default {methods: {switchLang(lang) {this.$i18n.locale = lang; // 切换当前语言localStorage.setItem("language", lang); // 持久化存储}}
};
</script>

三、进阶处理

Element UI 组件国际化
Element UI 自带多语言支持，需在 i18n 中整合：

// src/lang/index.js
import elementZhCN from "element-ui/lib/locale/lang/zh-CN";
import elementEnUS from "element-ui/lib/locale/lang/en";
import ElementLocale from "element-ui/lib/locale";// 合并自定义语言包和Element语言包
const messages = {"zh-CN": { ...zhCN, ...elementZhCN },"en-US": { ...enUS, ...elementEnUS }
};// 绑定i18n到Element
ElementLocale.i18n((key, value) => i18n.t(key, value));

动态加载语言包
若语言包过大，可通过 import() 动态加载：

// 切换语言时动态加载
async switchLang(lang) {const messages = await import(`./lang/${lang}.js`);this.$i18n.setLocaleMessage(lang, messages.default);this.$i18n.locale = lang;
}

日期/数字格式化
结合 moment 或 date-fns 处理多语言日期格式：

// 中文：2023年10月01日，英文：Oct 01, 2023
formattedDate() {return this.$i18n.locale === "zh-CN" ? moment().format("YYYY年MM月DD日"): moment().format("MMM DD, YYYY");
}