最近公司有个老项目(vue2)需要做国际化, 研究了一下 vue-i18n 文档, 简单记录一下使用步骤。
npm i vue-i18n@8 # support vue@2
# 如果你的项目是 vue3 请使用 vue-i18n@9+
1. 初始化 & 挂载
// main.js
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
locale: 'zh-CN', // 设置地区
messages: {
'zh-CN': require('./assets/lang/zh-CN'),
'en-US': require('./assets/lang/en-US')
} // 设置地区信息
})
new Vue({
i18n,
// ...
})
- 配置多语言信息
// assets/lang/en-US.js
module.exports = {
login: {
username: 'Please enter a user name',
password: 'Please enter a password',
}
}
// assets/lang/zh-CN.js
module.exports = {
login: {
username: '请输入用户名',
password: '请输入密码',
}
}
2. 读取 messages
// Page.vue
// 花括号语法
<div>{{$t('login.username')}}</div>
<div>{{$t('login.password')}}</div>
// 指令
<div v-t="'login.username'" />
3. 切换语言
// Page.vue
<button @click="$i18n.locale = 'en-US'">英文</button>
以上语法基本满足正常使用, 下面介绍一些实际开发中可能用到的高阶用法
4. 数字本地化(如: 货币, km/h...)
const i18n = new VueI18n({
locale: 'zh-CN', // 设置地区
numberFormats: {
'zh-CN': {
currency: {
style: 'currency',// 数字格式: 货币格式, 各种单位格式...
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
currency: 'CNY', // 币种
currencyDisplay: 'code' // 货币格式: symbol-符号(如¥), code-代码(如CNY)...
}
},
'en-US': {
currency: {
style: 'currency',
currency: 'USD'
}
}
},
// ...
})
// Page.vue
<div>{{ $t(100, 'currency') }}</div> // ¥100.00
