uniapp vue-i18n用法

1、引入i18n插件依赖

npm install vue-i18n --save

安装后存放位置在：node_modules目录下

2、在根目录下设置i18n文件夹，目录如下

├── i18n │   
├── common │   
│ ├── en.js │   
│ ├── zh.js │   
├── index.js

index.js代码如下

import VueI18n from 'vue-i18n' 
import Vue from 'vue' 
import zh from './common/zh.js' 
import en from './common/en.js' 
Vue.use(VueI18n) 
export default new VueI18n({ 
    locale:uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'en',
    messages:{ 
        'en':en, 
        'zh':zh, 
   }
})

zh.js代码如下

export default { 
    common:[ //抽屉导航
        {'text1':'首页'},
        {'text2':'分类'},
        {'text3':'购物车'},
        {'text4':'我的'},
    ],
    index:[
      {'text1':"分类"},
      {'text2':"更多"}
    ],
    message:{
        'confirmDel':'确定删除吗?',
        'loginLoading':'正在登录中',
    }
 }

3、在main.js中配置i18n，将插件注入到实例中

import App from './App'
import Json from './Json' //测试用数据
import store from './store' //引入状态管理store
import i18n from './i18n/index.js' //引入国际化，多语言

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
Vue.prototype.$api = {Json}
Vue.prototype.$store = store

App.mpType = 'app'

Vue.prototype._i18n = i18n //设置全局变量

const app = new Vue({
    store,
    i18n,
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    store,
    i18n,
    app
  }
}
// #endif

页面模板中使用 $t() 获取，并传递国际化json文件中定义的key，js中使用 this.$t('')

//直接调用
{{$t("index.text1")}}
<view class="title">{{$t('ucinfo.text2')}}</view>

//在标签中调佣
<input :placeholder="$t('ucinfo.text3')" name="input" v-model="formData.name" maxlength="10"></input>
//在标签函数中调佣
<view class="list-cell m-t b-b" @click="navTo($t('ucset.text3'))" @tap="utils.toast($t('ucset.text4'))" hover-class="cell-hover"
            :hover-stay-time="50">

//在data中调用，注意要用双引号，不要用单引号
title: this.$t("ucinfo.text9"),

如果引用的了子组件，子组件刷新问题（子组件显示实时数据）解决办法如下

<tabBar v-if="sonReset" :cureentPage="cureentPage"></tabBar>
//设置
sonReset：true
//实时刷新，可以放在 onShow中，也可以放在methods的函数中
this.sonReset = false
this.$nextTick(()=>{
    this.sonReset = true
})

首页更换语言动态设置修改头部标题和tabBar

//首页
<uni-data-select v-model="lang"
              :localdata="range"
              :placeholder="$t('common.text10')"
              @change="changeCurrency">
              </uni-data-select>
     
//
data() {
    return {                
        lang:'',//语言
        range:[
            { value: 'zh', text: "简体中文" },
            { value: 'en', text: "English" },
        ],//语言类型
        sonReset:true,//组件重新加载标致
    }
},
methods: {
    //选择语言
    changeCurrency(e){
        console.log(e)
        this._i18n.locale = e;
        //设置缓存
        uni.setStorageSync('locale', e)
        //获取缓存
        this.lang = uni.getStorageSync('locale')
        this.sonReset = false
        this.$nextTick(()=>{
            this.sonReset = true
        })
        //动态修改头部和tabBar
        this.setTitle()
    },
    setTitle(){
        //uni.setNavigationBarTitle({
            // 修改头部标题
        //    title:this.$t('common.text1'),
            //console.log(this.$i18n.locale)
        //})
        uni.setTabBarItem({
            // 修改底部导航
            index: 0,
            text: this.$t('common.text1'),
        });
        uni.setTabBarItem({
            // 修改底部导航
            index: 1,
            text: this.$t('common.text3'),
        });
        uni.setTabBarItem({
            // 修改底部导航
            index: 2,
            text: this.$t('common.text11'),
        });
        uni.setTabBarItem({
            // 修改底部导航
            index: 3,
            text: this.$t('common.text4'),
        });
    },
}

其他页面更换语言动态设置修改头部标题

onLoad() {
    this.setTitle() //设置头部
},
methods: {
    //设置头部
    setTitle(){
        uni.setNavigationBarTitle({
            //修改头部标题
            title:this.$t('pages.text3'),
        })
    },
}