vue-i18n 国际化实现

一、vue-i18n 基础搭建

#安装依赖

npm install vue-i18n@11

 

#配置实例

创建 i18n 实例并全局挂载：

// src/locales/index.js
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'zh-CN',
  fallbackLocale: 'zh-CN',
  messages: {}
})

export default i18n
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './locales'

createApp(App).use(i18n).mount('#app')

 

#createI18n 核心参数

参数	说明
locale	当前语言，如 'zh-CN'
fallbackLocale	当前语言不存在翻译时的回退语言
legacy	是否开启兼容模式，默认开启。vue3使用组合式api建议关闭；
globalInjection	是否全局注入 i18n 实例
messages	多语言文件对象
missingWarn	是否开启缺失翻译警告
missingFallback	是否开启回退警告

#在视图与逻辑中使用

模板中的使用

<h1>{{ $t('menu.home') }}</h1>

 

脚本中的使用

import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
t('common.save')

 

#文档引用

• vue-i18n v11 (Vue 3)
• vue-i18n (Vue 2)

---

#二、i18n 进阶

#动态传参与格式化输出，单复数处理

// en.js
{ comonn: { greeting: 'Welcome to our website, {name}！' },apple:"No apple | 1 apple | {count} apples" }

// zh-CN.js
{ common: { greeting: '{name}，欢迎你来到我们的网站！' },apple:"没有苹果 | 1个苹果 | {count}个苹果", }`
<p>{{ $t('common.greeting', { name: '张三' }) }}</p>
<p>{{ $t('common.apple', { count: 0 }) }}</p> 
<p>{{ $t('common.apple', { count: 1 }) }}</p> 
<p>{{ $t('common.apple', { count: 2 }) }}</p>

 

#性能优化

首屏加载多语言包可能导致性能问题，探讨优化方案。

---

#三、实际开发中常见组件框架的国际化适配

# Element Plus

全局配置

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, { locale: zhCn })

 

ConfigProvider 组件：动态切换语言包

<el-config-provider :locale="locale === 'en' ? en : zhCn">
  <router-view />
</el-config-provider>

 

文档引用：https://cn.element-plus.org/zh-CN/guide/i18n

# uniapp

文档引用：https://uniapp.dcloud.net.cn/tutorial/i18n.html

# 时间格式化

i18n 提供了时间格式化功能，实际项目中更推荐引入 dayjs、momentjs 等时间处理库，它们都有相应的国际化支持。

文档引用：

• dayjs 国际化
• momentjs 国际化

---

#四、提效工具

# i18n Ally

VS Code 插件，提供以下功能：

• 内联显示翻译结果
• 缺失翻译提醒
• 一键提取未翻译文案
• 多语言同步编辑

# Skills

创建 i18n 相关 Skills 提升国际化开发效率。