uniapp实现多语言国际化切换

5,283 阅读1分钟

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: '邮箱或者手机号'
    }
}
  1. 使用

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>

  1. 修改页面 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
        });
    }
    
  2. 切换语言
<button @click="changeLang('zh')">中文简体</button>
<button @click="changeLang('en')">English</button>

switchZh(lang) {
    //中文
    this._i18n.locale = lang;
    uni.setStorageSync('lang', lang);
},
  1. 也可以使用 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")
    }
});
  1. tips
  • 为了在页面刷新后仍然能够保持当前的语言环境,一般会将语言参数缓存到localStorage中
  • 语言切换只要改变i18n实例中locale的值