vue 项目之 vue-i18n 国际化实践
介绍
Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。
安装
npm i -S vue-i18n注意：工程 vue 版本为2.8+，则能直接安装 vue-i18n 最新版，老项目只能安装
“vue-i18n”: “^8.26.3”
如果项目为 vue-cli 脚手架安装
vue add i18n它会根据当前项目的 vue 版本提示用户安装合适的 vue-i18n 版本
使用
- 基本配置
locales/zh.json
{
"hello": "你好 i18n !!"
}locales/en.json
{
"hello": "hello, i18n!!"
}i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
function loadLocaleMessages () {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages
}
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'zh',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'zh',
messages: loadLocaleMessages()
})
loadLocaleMessages 方法加载 locales 上当下所有 *.json文件，并已文件名称为语言版本加载入i18n messages内。如 zh.json、en.json。
messages: {
zh: 'zh.json data',
en: 'en.json data'
}main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n'
Vue.config.productionTip = false
new Vue({
router,
i18n,
render: h => h(App)
}).$mount('#app')- 使用
语言切换
this.$i18n.locale = 'en'vue 文件使用
// $t('key') 国际化
<template>
<div class="i18n">
<h1>{{ $t('hello') }}</h1>
</div>
</template>
<script>
export default {
created() {
console.log(this.$t('hello'))
}
}
</script>具名格式【模板字符串】
templateStr: '你好 {name}'
<h2>{{ $t('templateStr', { name: '前端开发那点事' }) }}</h2>
列表格式
"listStr": "列表：{0}, {1}, {2}"
<h3>{{ $t('listStr', ['vue.js', 'react.js', 'angular.js']) }}</h3>
html 内容
"htmlStr": "html 标签<br /> 内容"
<h4 v-html="$t('htmlStr')"></h4>
支持 ruby on rails 的 i18n 格式
"rubyStr": "你好 %{name}"
<h5>{{ $t('rubyStr', { name: '前端开发那点事' }) }}</h5>
复数
"car": "car | cars",
"apple": "no apples | one apple | {count} apples"
<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>
<p>{{ $tc('apple', 0) }}</p>
<p>{{ $tc('apple', 1) }}</p>
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
更多参考： https://kazupon.github.io/vue-i18n/zh/started.html
