uniapp实现多语言国际化切换

1.下载vue-i18n

vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言. 官网地址

npm install vue-i18n
yarn add vue-il8n

2.在main.js中引入插件

main.js

import Vue from 'vue'
import App from './App'
// 引入 多语言包
import VueI18n from 'vue-i18n'
import i18n from './assets/lang/index.js'

Vue.config.productionTip = false

Vue.prototype._i18n = i18n
App.mpType = 'app'

const app = new Vue({
   i18n,
   ...App
})
app.$mount()

/assets/lang/index.js

import Vue from 'vue'
// 引入 多语言包
import VueI18n from 'vue-i18n'
import zh from './zh.js'
import en from './en.js'
import hk from './hk.js'

Vue.use(VueI18n)

// 创建实例
const i18n = new VueI18n({
    locale: uni.getStorageSync('lang') ? uni.getStorageSync('lang') : "zh",
    messages: {
        zh, en, hk
    }
});

export default i18n;

zh.js

import loginOrRegister from "./loginAndRegister/zh.js"

export default {
    loginOrRegister: {
        login: '登 录',
        emailOrPhone: '邮箱或者手机号'
    }
}

3. 使用

uniapp 不支持在取值表达式中直接调方法，因此，$t方法不可用，需要通过计算属性的方式 login.vue

<template>
    <view class="content-page">
        <view class="uni-btn-v">
            <button form-type="submit" class="login-btn">{{ i18n.login }}</button>
        </view>
    </view>
</template>

<script>
export default {
    computed: {
        i18n() {
            return this.$t('loginOrRegister')
        }
    }

}
</script>

4. 修改页面 title 与 底部 tabbar app.vue

   onShow() {
       uni.setNavigationBarTitle({// 修改头部标题
           title: this.$i18n.messages[this.$i18n.locale].loginOrRegister.login
       });
   
       uni.setTabBarItem({// 修改底部导航
           index: 0,
           text: this.$i18n.messages[this.$i18n.locale].loginOrRegister.login
       });
   }
   

5. 切换语言

<button @click="changeLang('zh')">中文简体</button>
<button @click="changeLang('en')">English</button>

switchZh(lang) {
    //中文
    this._i18n.locale = lang;
    uni.setStorageSync('lang', lang);
},

6. 也可以使用 json数据

const i18n = new VueI18n({
    locale: uni.getStorageSync('lang') == (undefined || "" || null) ?
        "zh" :
        uni.getStorageSync('lang'),
    messages: {
        zh: require("./static/lang/zh.json"),
        en: require("./static/lang/en.json")
    }
});

7. tips

• 为了在页面刷新后仍然能够保持当前的语言环境，一般会将语言参数缓存到localStorage中
• 语言切换只要改变i18n实例中locale的值