uniapp + Vue使用vueI18n实现多语言

uniapp + Vue使用vueI18n，动态获取服务器语言文件实现多语言

我们一般来说，多语言文件都存在服务器中，前端加载的时候获取，所以这就需要用到vueI18n的一个函数 setLocaleMessage(lang,message)
官方文档

一、一次性获取所有多语言文件

我们可以一次性获取所有多语言文件。
下面的代码中用到了process.env环境变量，这是为了以后方便配置语言文件的路径

// vueI18n.js 文件
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import axios from 'axios'

Vue.use(VueI18n)

const langs = {
  en_US: process.env.VUE_APP_LANG_BASE_URL + '/en.json',
  zh_CN: process.env.VUE_APP_LANG_BASE_URL + '/zh_CN.json'
}

// 导出VueI18n对象
export const i18n = new VueI18n({
  locale: 'en_US', //设置默认语言为英语
  fallbackLocale: 'en_US', //如果设置了一个不存在的语言，则回退为‘en_US’
  messages:{}
})

//获取所有多语言文件
function getAllLangJson() {
  const promiseList = []
  for (let lang in langs) {
    const getLang = axios.get(langs[lang])
    promiseList.push(getLang)
  }
  axios.all(promiseList).then(axios.spread((...res) => {
    Object.keys(langs).forEach((lang, idx) => {
      i18n.setLocaleMessage(lang, res[idx].data)
    })
  }))
}

//res[idx].data的语言文件格式如下
//{
//	“home:username”:"用户名",
//	"home:age":"年龄"
//}

getAllLangJson()

二、分多次异步加载语言文件

一次性获取所有的语言文件是过度的也是不必要的，我们可以选择性的将语言文件进行分割。可以按照页面进行分割，进入该页面的时候获取该语言环境下的语言文件，但这样的缺点是会导致语言文件划分得非常的细。有一个折中的方法是在进行语言设置的时候获取语言文件，这样的话就不同语言文件就只需要一个就够了。

代码在vueI18n官网网中已经给出，这里解释一下这个代码的用途

//i18n-setup.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from '@/lang/en'
import axios from 'axios'

Vue.use(VueI18n)

export const i18n = new VueI18n({
  locale: 'en', // 设置语言环境
  fallbackLocale: 'en',
  messages // 设置语言环境信息
})

const loadedLanguages = ['en'] // 我们的预装默认语言

function setI18nLanguage (lang) {
  i18n.locale = lang   //切换语言环境
  //在axios请求头设置语言字段，这个原因是，服务器可以根据不同的语言返回不同的数据
  //因为国际化不仅需要国际化固定的字段，还有很多数据需要国际化。
  axios.defaults.headers.common['Accept-Language'] = lang 
  //设置html的lang属性，这是用来给浏览器判断这个页面的语言的，
  //如果不设置浏览器无法判断，不过不影响数据展示。
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

export function loadLanguageAsync(lang) {
  // 如果语言相同
  if (i18n.locale === lang) {
    return Promise.resolve(setI18nLanguage(lang))
  }

  // 如果语言已经加载
  if (loadedLanguages.includes(lang)) {
    return Promise.resolve(setI18nLanguage(lang))
  }

  // 如果尚未加载语言，就获取语言文件，并设置语言。
  return axios.get(`${baseUrl}/i18n/messages/${lang}.js`).then(
    messages => {
      i18n.setLocaleMessage(lang, messages.default)
      loadedLanguages.push(lang)
      return setI18nLanguage(lang)
    }
  )
}

我们只需要在语言切换按钮中调用loadLanguageAsync函数就行

onLangChange(lang){
	loadLanguageAsync(lang)
}

三、使用方式

在main.js 文件的引用方式如下

// main.js
import App from './App'
import Vue from 'vue'
import {i18n} from './common/vueI18n.js'

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  i18n,
  ...App
})
app.$mount()

vue会将i18n对象挂载原型对象上，直接this.$i18n就可以获取到i18n的引用。切换语言的操作如下

this.$i18n.locale = 'en_US' //改为你已经挂载的语言

在vue文件中使用方式如下

//标签上的使用方法
<div :title="$t(`home:age`)">{{$t(`home:username`)}}</div>
//js上的使用方法
const name = this.$t(`home:username`)