vue 国际化实现
Vue 国际化实现方案
Vue 的国际化（i18n）通常通过 vue-i18n 库实现，以下是具体实现方法：
安装 vue-i18n
通过 npm 或 yarn 安装：
npm install vue-i18n
# 或
yarn add vue-i18n配置语言文件
创建语言资源文件，例如：
// en.json
{
"message": {
"hello": "Hello world"
}
}
// zh-CN.json
{
"message": {
"hello": "你好世界"
}
}初始化 i18n 实例
在 Vue 项目中设置 i18n：
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locales/en.json'
import zh from './locales/zh-CN.json'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en', // 默认语言
fallbackLocale: 'en', // 回退语言
messages: {
en,
'zh-CN': zh
}
})
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')在模板中使用
通过 $t 方法或指令绑定：
<template>
<div>
<p>{{ $t('message.hello') }}</p>
<p v-t="'message.hello'"></p>
</div>
</template>动态切换语言
通过修改 locale 属性实现：
this.$i18n.locale = 'zh-CN'高级功能
- 复数处理：通过管道符
|分隔不同复数形式{ "apple": "apple | apples" } - 日期/时间本地化：使用
DateTimeFormat - 数字本地化：使用
NumberFormat
注意事项
- 语言文件建议按功能模块拆分
- 生产环境可配合懒加载动态导入语言包
- 可通过
vue-i18n-loader实现 SFC 内的多语言块
替代方案
对于 Composition API 项目，可使用 vue-i18n@next 的 useI18n：
import { useI18n } from 'vue-i18n'
export default {
setup() {
const { t } = useI18n()
return { t }
}
}
