vue项目实现国际化-vue-i18n

vue-i18n

一、安装

1、直接下载 / CDN

https://unpkg.com/vue-i18n/dist/vue-i18n

unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以通过 https://unpkg.com/vue-i18n@8.9.0/dist/vue-i18n.js 这样的 URL 指定版本号或者 tag。

在 Vue 之后引入 vue-i18n，它会自动安装：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/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 https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n
cd node_modules/vue-i18n
npm 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 test
    string_lang1=title
    string_lang2=content，balabala
    string_lang3=nav1
    string_lang4=nav2
    string_lang5=nav3
    string_lang6=nav4
    string_lang7=screen1
    string_lang8=screen content
    string_lang9=change to Chinese
}
zh.js中文语言包：
export const m = {
    string_title=js 语言包测试
    string_lang1=标题
    string_lang2=段落内容，balabala
    string_lang3=导航1
    string_lang4=导航2
    string_lang5=导航3
    string_lang6=导航4
    string_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, 2017</p>
  <p>2017年4月19日(水) 午前2:19</p>
</div>

   详细Vue I8n文档