vue-i18n 国际化实现

科技前沿 • 2026-04-18 18:17 • 阅读 1

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

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’)

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

模板中的使用

{{ $t(‘menu.home’) }}

脚本中的使用

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

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

// 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}个苹果", }` {{ $t('common.greeting', { name: '张三' }) }}
 {{ $t('common.apple', { count: 0 }) }}
 {{ $t('common.apple', { count: 1 }) }}
 {{ $t('common.apple', { count: 2 }) }}

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

全局配置

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

ConfigProvider 组件：动态切换语言包

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

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

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

文档引用：

dayjs 国际化

momentjs 国际化

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

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

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

vue-i18n 国际化实现

{{ $t(‘menu.home’) }}

相关推荐