出处：掘金

原作者：金泽宸

国际化做得好，不止是“语言切换”，而是文本系统平台化管理 + 跨端一致性架构能力的体现

写在前面

当你的前端系统面向多地区、多国家时，“多语言”能力就是系统级刚需。一个成熟的国际化系统应当具备：

动态语言切换
组件/页面文本的自动翻译提取
后端联动语言返回内容
支持中英/中日韩/语言变体
配合业务平台可视化配置词条

本篇我们将系统性设计一个企业级国际化架构方案，覆盖 i18n 接入、词条提取、运行时动态切换、平台化能力支持等内容

国际化系统核心组成

模块	说明
语言包	各语言对应的 JSON 资源文件
词条函数	映射词条 key 到具体文案
运行时语言切换	动态设置语言，实时刷新组件
语言持久化	使用 localStorage、cookie 等
插件接入	vue-i18n / react-intl 等国际化插件

语言资源结构设计

locales/
├── zh-CN.json
├── en-US.json
└── ja-JP.json

每个文件内容：

{
  "common": {
    "confirm": "确认",
    "cancel": "取消"
  },
  "user": {
    "title": "用户列表",
    "name": "用户名",
    "email": "邮箱"
  }
}

Vue3 + vue-i18n 接入流程

npm install vue-i18n

创建 i18n 实例：

// i18n.ts
import { createI18n } from 'vue-i18n'
import zh from './locales/zh-CN.json'
import en from './locales/en-US.json'
 
export const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('lang') || 'zh-CN',
  fallbackLocale: 'zh-CN',
  messages: { 'zh-CN': zh, 'en-US': en },
})

入口使用：

import { createApp } from 'vue'
import { i18n } from './i18n'
 
createApp(App).use(i18n).mount('#app')

组件中使用多语言

<template>
  <h3>{{ t('user.title') }}</h3>
  <pf-button>{{ t('common.confirm') }}</pf-button>
</template>
 
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

运行时语言切换 + 持久化

function switchLang(lang: string) {
  i18n.global.locale.value = lang
  localStorage.setItem('lang', lang)
}

页面中：

<Select v-model="lang" @change="switchLang">
  <Option value="zh-CN">简体中文</Option>
  <Option value="en-US">English</Option>
</Select>

切换后，全页面立即响应刷新文本内容

动态加载语言包

适用于多语种、首屏性能优化：

const messages = {
  'zh-CN': () => import('./locales/zh-CN.json'),
  'en-US': () => import('./locales/en-US.json'),
}
 
async function switchLang(lang) {
  const msg = await messages[lang]()
  i18n.global.setLocaleMessage(lang, msg)
  i18n.global.locale.value = lang
}

词条抽取与平台配置化建议

方法 1：手动规范 key 命名

模块 + 业务

t('user.email') → 用户模块的 email 字段
 
t('product.detail.tab.review') → 产品详情页下的评论 Tab

方法 2：自动词条提取工具（推荐）

可使用插件：

i18n-extract
VSCode i18n Ally 插件

自动扫描项目中 t('xxx') 使用的词条 → 输出未翻译列表

支持后端返回文案

后端返回内容为：

{
  "title": {
    "zh-CN": "用户管理",
    "en-US": "User Management"
  }
}

前端处理：

function renderLangLabel(item: Record<string, string>) {
  return item[i18n.global.locale.value] || item['zh-CN']
}

可用于动态菜单、平台词条配置、运营活动内容等场景

组件封装建议

所有组件文字通过 props 注入文案 key 或字符串
支持 fallback 默认值
插槽方式提供最大自由度

<CustomDialog :title="$t('user.title')">
  <template #footer>
    <pf-button>{{ $t('common.confirm') }}</pf-button>
  </template>
</CustomDialog>

平台化建议（国际化配置平台）

能力	推荐做法
词条集中管理	JSON / Excel 托管 → 后台系统配置
翻译管理	支持中英原文对照、AI 翻译集成
词条冲突检测	自动检测重复 key，自动补全未翻译语言
多项目共享语言包	多项目共用一套 i18n 仓库或服务端拉取词条
插件支持	VSCode i18n Ally、Webstorm 翻译辅助插件

My-Notes

全部文章

014.前端多语言国际化架构设计