vue-i18n
一、安装
1、直接下载 / CDN
/vue-i18n/dist/vue-i18n
提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以通过 /vue-i18n@8.9.0/dist/vue-i18n.js 这样的 URL 指定版本号或者 tag。
在 Vue 之后引入 vue-i18n,它会自动安装:
<script src="/vue/dist/vue.js"></script><script src="/vue-i18n/dist/vue-i18n.js"></script>
2、NPM
npm install vue-i18n
3、Yarn
yarn add vue-i18n
如果在一个模块系统中使用它,你必须通过Vue.use()
明确地安装vue-i18n
:
import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)
如果使用全局的 script 标签,则无须如此 (手动安装)
4、Vue Cli 3.x
vue add i18n
你需要 Vue cli 3.x 作为先决条件,你可以在命令行上使用下面的命令来安装:
npm install @vue/cli -g
5、开发版构建
如果你想使用最新的开发版构建,就得从 GitHub 上直接 clone,然后自己构建一个vue-i18n
。
git clone /kazupon/vue-i18n.git node_modules/vue-i18ncd node_modules/vue-i18nnpm install # or `yarn`npm run build # or `yarn run build`
二、使用
在 main.js 中引入 vue-i18n:
import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i18n = new VueI18n({locale: 'zh-CN', // 语言标识//this.$i18n.locale // 通过切换locale的值来实现语言切换messages: {'zh-CN': require('./common/lang/zh'), // 中文语言包'en-US': require('./common/lang/en') // 英文语言包}})/* eslint-disable no-new */new Vue({el: '#app',i18n, // 不要忘记store,router,template: '<App/>',components: { App }})
上面的代码正式将 vue-i18n 引入 vue 项目中,创建一个 i18n 实例对象,方便全局调用。我们通过this.$i18n.locale
来进行语言的切换。
我们需要所使用的语言的文件,只需要两个(自己使用的语言包) js 文件,通过 require 的形式引入到 main.js。
例如:
en.js 英文语言包:export const m = { string_title=js language teststring_lang1=titlestring_lang2=content,balabalastring_lang3=nav1string_lang4=nav2string_lang5=nav3string_lang6=nav4string_lang7=screen1string_lang8=screen contentstring_lang9=change to Chinese}zh.js中文语言包:export const m = {string_title=js 语言包测试string_lang1=标题string_lang2=段落内容,balabalastring_lang3=导航1string_lang4=导航2string_lang5=导航3string_lang6=导航4string_lang7=第一屏string_lang8=第一屏内容string_lang9=切换到英文}
点击事件切换语言
/*** 切换语言 */ changeLangEvent() {this.$confirm('确定切换语言吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {if ( this.lang === 'zh-CN' ) {this.lang = 'en-US';this.$i18n.locale = this.lang;//关键语句}else {this.lang = 'zh-CN';this.$i18n.locale = this.lang;//关键语句}}).catch(() => {this.$message({type: 'info',});});}
通过预定义的参数访问该数字
可以通过预定义的命名参数{count}
和/或{n}
在语言环境信息中访问该数字。如有必要,你可以覆盖这些预定义的命名参数。
语言环境信息如下:const messages = {en: {apple: 'no apples | one apple | {count} apples',banana: 'no bananas | {n} banana | {n} bananas'}}
模板如下:<p>{{ $tc('apple', 10, { count: 10 }) }}</p><p>{{ $tc('apple', 10) }}</p><p>{{ $tc('banana', 1, { n: 1 }) }}</p><p>{{ $tc('banana', 1) }}</p><p>{{ $tc('banana', 100, { n: 'too much' }) }}</p>输出如下:<p>10 apples</p><p>10 apples</p><p>1 banana</p><p>1 banana</p><p>too much bananas</p>
注意:这种复数并不适用于所有语言 (例如,斯拉夫语言具有不同的复数规则)。
自定义复数
/*** @param choice {number} 由 $tc 输入的选择索引:`$tc('path.to.rule', choiceIndex)`* @param choicesLength {number} 总体可用选择* @returns 选择复数单词的最终选择索引**/VueI18n.prototype.getChoiceIndex = function (choice, choicesLength) {// this === VueI18n 实例,所以语言环境属性也存在于此处if (this.locale !== 'ru') {// 继续执行默认实现}if (choice === 0) {return 0;}const teen = choice > 10 && choice < 20;const endsWithOne = choice % 10 === 1;if (!teen && endsWithOne) {return 1;}if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {return 2;}return (choicesLength < 4) ? 2 : 3;}这将有效地实现这一目标:const messages = {ru: {car: '0 машин | 1 машина | {n} машины | {n} машин',banana: 'нет бананов | 1 банан | {n} банана | {n} бананов'}}格式为 0 things | 1 thing | few things | multiple things.你的模板仍然需要使用 $tc(),而不是 $t() :<p>{{ $tc('car', 1) }}</p><p>{{ $tc('car', 2) }}</p><p>{{ $tc('car', 4) }}</p><p>{{ $tc('car', 12) }}</p><p>{{ $tc('car', 21) }}</p><p>{{ $tc('banana', 0) }}</p><p>{{ $tc('banana', 4) }}</p><p>{{ $tc('banana', 11) }}</p><p>{{ $tc('banana', 31) }}</p>结果如下:<p>1 машина</p><p>2 машины</p><p>4 машины</p><p>12 машин</p><p>21 машина</p><p>нет бананов</p><p>4 банана</p><p>11 бананов</p><p>31 банан</p>
日期时间本地化
日期时间格式如下:const dateTimeFormats = {'en-US': {short: {year: 'numeric', month: 'short', day: 'numeric'},long: {year: 'numeric', month: 'short', day: 'numeric',weekday: 'short', hour: 'numeric', minute: 'numeric'}},'ja-JP': {short: {year: 'numeric', month: 'short', day: 'numeric'},long: {year: 'numeric', month: 'short', day: 'numeric',weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true}}}如上,你可以定义具名的 (例如:short、long 等) 日期时间格式,并需要使用 ECMA-402 Intl.DateTimeFormat 的选项。之后就像语言环境信息一样,你需要指定 VueI18n 构造函数的 dateTimeFormats 选项:const i18n = new VueI18n({dateTimeFormats})new Vue({i18n}).$mount('#app')模板如下:<div id="app"><p>{{ $d(new Date(), 'short') }}</p><p>{{ $d(new Date(), 'long', 'ja-JP') }}</p></div>输出如下:<div id="app"><p>Apr 19, </p><p>4月19日(水) 午前2:19</p></div>
详细Vue I8n文档