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: '邮箱或者手机号'
}
}
- 使用
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>
- 修改页面 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 }); }
- 切换语言
<button @click="changeLang('zh')">中文简体</button>
<button @click="changeLang('en')">English</button>
switchZh(lang) {
//中文
this._i18n.locale = lang;
uni.setStorageSync('lang', lang);
},
- 也可以使用 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")
}
});
- tips
- 为了在页面刷新后仍然能够保持当前的语言环境,一般会将语言参数缓存到localStorage中
- 语言切换只要改变i18n实例中locale的值