vue-i18n-使用笔记

vue-i18n-使用笔记

What&Why

vue-i18n是一个用于vue项目国际化的插件，在项目中使用后可以做到切换多语言版本。使用后不需要为每个页面开发两个版本，只需要在不同的js或json文件中翻译即可。

Installation

npm install vue-i18n --save
yarn add vue-i18n
vue add vue-i18n

用vue命令新建会自动生成i18n.js、./locales、./components/helloi18n.vue文件或文件夹。

Brief guide

一般使用会在src/lang或src/locales中新建index.js和各个语言版本的js或json文件（json格式要特殊处理，但是是vue add vue-i18n的使用方式）。

下面的例子结合了elementui的国际化，和利用了js-cookie来记录用户所选语言。

// main.js
import i18n from './locales'

...

new Vue({
  el: '#app',
  i18n,
  render: (h) => h(App),
})

// src/locales/index.js
// add cookie to cache
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
import enLocale from './en.json'
import zhLocale from './zh.json'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale,
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale,
  },
}
export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage

  // if has not choose language
  const language = (
    // get brower's language
    navigator.language || navigator.browserLanguage
  ).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'en'
}
const i18n = new VueI18n({
  locale: getLanguage(),
  messages,
})

export default i18n

// src/locales/en.js
export default {
	message: 'Hello world',
    navbar: {
        index: 'Homepage'
    }
}

// anywhere 
Vue.use(ElementUI, {
	...
	i18n: (key, value) => i18n.t(key, value),
})

To Switch Language inside App

// anywhere to switch 
this.$i18n.locale = 'zh'
this.$i18n.locale = 'en'

To Use

// any .vue .jsx file
<div>{{ $t('message') }}</div>
<div>{{ $t('navbar.index') }}</div>
// .js
this.$t('message')
vm.$t('message')

VSCode Plugin

i18n-ally

更好地帮助我们去使用i18n，使用起来更直观

注意：使用js文件去编写翻译文件的话，这个插件不能很好地工作。但如果仍要坚持使用js文件且配合插件利用少数功能，可以在插件的扩展设置 - I18n-ally: Enabled Parsers项添加js格式。