今天刚忙完手上的事，休息休息一下，正好给大家整理分享一下这几天使用的vue-i18n。
首先需要准备的东西
1.打开相应项目的端口下载vue-i18n插件
npm init
npm install vue-i18n
项目就会出现这几个文件
2.新建一个文件夹language，用来存放不同语言的js文件
可以像我这样
home文件夹存放的是不同语言的内容版本，mixin.js文件是用来混入，utils.js文件用来引入不同语言的js然后统一暴露出去
zh.js，th.js， en.js
mixin.js
// 混入 生命周期 以及方法 等等
import Vue from 'vue'
export default Vue.mixin({
data() {
return {
}
},
computed:{
LANGUAGE () {
return this.$t('lang')
}
},
onLoad() {
},
methods:{
}
})
utils.js
import home_zh from './lang/home/zh'
import home_en from './lang/home/en'
import home_th from './lang/home/th'
const ZH = {
// 中文简体
lang: {
...home_zh}
}
const EN = {
// 英语
lang: {
...home_en}
}
const TH = {
// 泰文
lang: {
...home_th}
}
export {
ZH, EN, TH}
3.在main.js文件中引入配置vue-i18n
// 多语言设置
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
import {
ZH, EN, TH} from 'language/utils.js'
import mixin from './language/mixin.js'
const i18n = new VueI18n({
//默认选择的语言类型 这里默认中文 locale: uni.getStorageInfoSync('language') || 'ja',
locale: uni.getStorageSync('selLanguage') || 'zh_CN',
messages: {
'zh_CN': ZH,
'en_US': EN,
'th_TH': TH,
}
})
Vue.prototype._i18n = i18n
App.mpType = 'app'
const app = new Vue({
i18n,
store,
...App
})
到这里准备工作都弄好了，接下来就是在页面中去使用
1.在对应的页面中使用内容
<template>
<view>
<text>{
{
LANGUAGE.tabBatTitle.text1}}</text>
</view>
</template>
2.在script标签中使用
<script>
export default {
onLoad:{
uni.showToast({
title:this.LANGUAGE.Toast.text6})
},
}
</script>
3.动态切换导航栏、tabbar、导航栏按钮的内容
onShow() {
//动态切换导航栏上的内容
uni.setNavigationBarTitle({
title: this.LANGUAGE.navText.text1
})
let tabbarTitle = [
this.LANGUAGE.tabBatTitle.text1,
this.LANGUAGE.tabBatTitle.text2,
this.LANGUAGE.tabBatTitle.text3,
this.LANGUAGE.tabBatTitle.text4,
this.LANGUAGE.tabBatTitle.text5
]
//动态切换tabbar上的内容
for (let i in tabbarTitle) {
uni.setTabBarItem({
index: Number(i),
text: tabbarTitle[Number(i)],
})
}
//动态切换导航栏上按钮的内容
// #ifdef APP-PLUS
let webView = this.$mp.page.$getAppWebview();
webView.setTitleNViewButtonStyle(0, {
text: this.LANGUAGE.navText.text7
});
// #endif
},
4.切换多语言
this._i18n.locale = 'zh_CN'//切换语言为中文
//保存状态到vuex,可用可不用，看个人需要
//this.$store.commit('LanguageType',this.type)
//保存状态到本地,可用可不用，看个人需要
//uni.setStorageSync('selLanguage',this.type)
//切换语言后更改当前页面的导航栏内容
uni.setNavigationBarTitle({
title: this.LANGUAGE.navText.text26
})
具体的使用方法就这些了，如果有什么问题疑问可在下方留言或者私信，如果对你有用请点赞收藏哦，谢谢支持！