i18n

Vue I18n Vue I18n is internationalization plugin for Vue.js

$ yarn add vue-i18n

main.js

import i18n from './i18n'
new Vue({
    ...
    store,
    i18n,
})

src/i18n/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enUS from './en-US.js'
import zhCN from './zh-CN.js'
import zhTW from './zh-TW.js'

Vue.use(VueI18n)

var i18n = new VueI18n({
  locale: 'en-US',
  messages: {
    'en-US': enUS,
    'zh-CN': zhCN,
    'zh-TW': zhTW
  },
  sync: false,
  silentTranslationWarn: process.env.NODE_ENV.indexOf('production') !== -1
})

export default i18n

vue-i18n/api/#constructor-options

语言环境变更

vue-i18n 提供了一个全局配置参数叫 “locale”，通过改变 locale 的值可以实现不同语种的切换

你可以更改 VueI18n 实例的 locale 属性的值

const i18n = new VueI18n({
  locale: 'ja', // 设置语言环境
  ...
})

// 创建 Vue 根实例
new Vue({
  i18n,
  ...
}).$mount('#app')

// 更改为其它的 locale
i18n.locale = 'en'

每个组件都包含一个引用为 $i18n 属性的 VueI18n 实例，该实例也可用于更改语言环境。

<template>
  <div class="locale-changer">
    <select v-model="$i18n.locale">
      <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'locale-changer',
  data () {
    return { langs: ['ja', 'en'] }
  }
}
</script>

let locale = this.$i18n.locale
locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'

格式化

const messages = {
  en: {
    message: {
      hello: '%{msg} world'
    }
  }
}

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

<p>hello world</p>

v-text

en-US.js

member_level: '%{msg} Member',
member_level_star: '1 Star',

<span v-text="$t('member_level', { msg: $t(account.level) })"></span>

js-cookie

index.html

  <script src=https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js></script>

webpack.base.conf.js

  externals: {
    'js-cookie': 'Cookies'
  },

lang/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale
  },
  zh: {
    ...zhLocale
  }
}

var type = navigator.appName
var lang
if (type === 'Netscape') {
  lang = navigator.language // 获取浏览器配置语言，支持非IE浏览器
} else {
  lang = navigator.browserLanguage // 获取浏览器配置语言，支持IE5+ == navigator.systemLanguage
}
lang = lang.substr(0, 2) // 获取浏览器配置语言前两位

import Cookies from 'js-cookie'
const i18n = new VueI18n({
  locale: Cookies.get('language') || lang, // set locale
  messages // set locale messages
})
export default i18n

main.js

import i18n from './lang'
new Vue({
  el: '#app',
  i18n,
})

<template>
  <div class="hello">
    <h1>{{$t('index.world')}}</h1>
  </div>
</template>

en.js

export default {
  index: {
     world: "Hello World'",
  }
}

Debug

Error in render: "TypeError: Cannot read property '_t' of undefined"

main.js i18n 檢查注入

new Vue({
  el: '#app',
  router,
  i18n,