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`)

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！