I just finished what I was doing today and took a break. I just want to share with you the vue-i18n I have been using these past few days.
Things to prepare first
1. Open the port of the corresponding project and download the vue-i18n plug-in
npm init
npm install vue-i18n
These files will appear in the project
2. Create a new folder language to store js files in different languages.
Like me, 
the home folder can store content versions in different languages. The mixin.js file is used to mix in, and the utils.js file is used to introduce js in different languages and then expose
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.Introduce the configuration vue-i18n in the main.js file
// 多语言设置
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
})
Now that the preparations are done, the next step is to use it on the page.
1. Use the content in the corresponding page
<template>
<view>
<text>{
{
LANGUAGE.tabBatTitle.text1}}</text>
</view>
</template>
2.Use in script tag
<script>
export default {
onLoad:{
uni.showToast({
title:this.LANGUAGE.Toast.text6})
},
}
</script>
3. Dynamically switch the contents of the navigation bar, tabbar, and navigation bar buttons
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.Switch multiple languages
this._i18n.locale = 'zh_CN'//切换语言为中文
//保存状态到vuex,可用可不用，看个人需要
//this.$store.commit('LanguageType',this.type)
//保存状态到本地,可用可不用，看个人需要
//uni.setStorageSync('selLanguage',this.type)
//切换语言后更改当前页面的导航栏内容
uni.setNavigationBarTitle({
title: this.LANGUAGE.navText.text26
})
These are the specific usage methods. If you have any questions or questions, please leave a message below or send a private message. If it is useful to you, please like and save it. Thank you for your support!