Vue | 国际化i18n使用(普通js中使用)

vue-i18n的安装、配置、vue中的使用、普通js中使用

[TOC]

安装

npm install vue-i18n --save

配置

1. 在src > main.js 中引入vue-i18n

import VueI18n from 'vue-i18n'
import i18n from './lang' //i18n的配置文件

// 因为我项目中用到了element-ui，需要将element-ui的国际化配上
Vue.use(Element, {   
  size: Cookies.get('size') || 'small', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})

// 将i18n挂载到Vue实例中
new Vue({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App)
})

2.在项目src文件夹中创建一个lang文件夹，放置语言包及index

// src > lang > index.js

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 的语言包，没用到的可以不引入
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui 的语言包，没用到的可以不引入
import enLocale from './en' // 项目中的语言包 英文
import zhLocale from './zh' // 项目中的语言包 中文

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 = (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

3.在项目中切换语言(项目中用到了Vuex)

vue中的点击事件

handleSetLanguage(lang) {
  this.$i18n.locale = lang  //也可以放在store中操作
  this.$store.dispatch('app/setLanguage', lang)
}

store中的操作

import { getLanguage } from '@/lang/index'

const state = {
  language: getLanguage(),
}

const mutations = {
  SET_LANGUAGE: (state, language) => {
    state.language = language
    Cookies.set('language', language)
  }
}

const actions = {
  setLanguage({ commit }, language) {
    commit('SET_LANGUAGE', language)
  }
}

使用i18n

到了这一步，就是i18n在项目中的使用了

<template>
  <h3 class="title">
  <!-- 使用1 -->
    {{ $t('login.title') }} 
  </h3>
  
  <!-- 使用2 -->
  <el-input :placeholder="$t('login.title')">
</template>

<script>
import i18n from '@/lang' //如果是vue文件以外的地方使用，可用这种方式(比如路由)
const loginTitle = i18n.t('login.title')  //使用4

export default {
  name: 'Login',
  data() {
    const _this = this
    return {
      title: _this.$t('login.title')  // 使用3
    }
  },
  methods:{
    login(){
      console.log(this.$t('login.title')) // 使用3
      console.log(this.$t('login.hello', { name: 'Admin' })) //使用5，i18n中传参的方法
    }
  }
}
</script>

对应的，在src > lang > en.js / zh.js 语言包中，都需要加上参数

//zh.js中

//如果中英文的参数太多，也可以拆成多个文件，用import的方式引入export的文件
import basic from './basic/zh';

export default {
  login:{
  	title:'登录',
        hello:'您好 {name}'
  },
  basic
}



//en.js中
import basic from './basic/en';

export default {
  login:{
  	title:'Login',
        hello:'hello {name}'
  },
  basic
}

ps：其实国际化用上了vue-i18n之后，并没有什么难点。最让人痛苦的就是项目里用到的文字太多太多了，需要一个个提取出来变成变量，真是令人头秃的工作。