http://kazupon.github.io/vue-i18n/zh/introduction.html
开始
安装
兼容性说明
直接下载 / CDN
NPM
npm install vue-i18n
Yarn
- 在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
Vue Cli 3.x
- 注释:在@vue/cli创建的项目中添加i18n插件,vue需要全局安装,未全局安装的话可以通过vue ui来进行插件安装
- 注释:安装的插件会生成相应的文件和配置文件
vue add i18n
开发版构建
格式化
具名格式
const messages = {
en: {
message: {
hello: '{msg} world'
}
}
}
<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
列表格式
const messages = {
en: {
message: {
hello: '{0} world'
}
}
}
<p>{{ $t('message.hello', ['hello']) }}</p>
// 列表格式也接受类似数组的对象:
<p>{{ $t('message.hello', {'0': 'hello'}) }}</p>
HTML 格式化
const messages = {
en: {
message: {
hello: 'hello <br> world'
}
}
}
<p v-html="$t('message.hello')"></p>
支持 ruby on rails 的 i18n 格式
const messages = {
en: {
message: {
hello: '%{msg} world'
}
}
}
<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
自定义格式