项目场景:
uniapp中使用i18n插件实现页面中英文语言切换
步骤如下:
步骤解释:
- 引入i18n------创建i18n实例------通过Vue.use()进行注册;
- locale表示要切换的语言,zh显示中文,en显示的是英文;
- 实现中英文的切换,给按钮绑定点击事件,修改的就是locale的值为zh或en;
- zh和cn是自定义的名字,通过messages自定义;
- 新建文件夹lang,里面放两个文件夹为zh,en,里面的数据是自定义的,通过$t(‘’)调用里面的变量即可。
1、安装
通过npm安装i18n插件:npm install vue-i18n --save
2、配置
1、在main.js中进行配置
// #ifndef VUE3
import Vue from 'vue'
import App from './App'
// 1、引入多语言切换i18n
import VueI18n from 'vue-i18n'
import zh from './lang/zh/index.js'
import en from './lang/en/index.js'
// 2、使VueI18n
Vue.use(VueI18n)
Vue.config.productionTip = false
// 需要切换的语言包
const messages = {
zh, // 中文
en // 英文
}
// 3、创建i18n实例
const i18n = new VueI18n({
// locale表示要切换的语言,zh显示中文,en显示的是英文
locale: 'zh',
messages
})
Vue.prototype._i18n = i18n //这句放到App.mpType = 'app'的前面或者后面都不影响
App.mpType = 'app'
const app = new Vue({
i18n,
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import {
createSSRApp
} from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
2、uniapp 不支持在取值表达式中直接调方法,因此,$t方法不可用,所以通过计算属性的方式,在当前页面写该计算属性,在页面进行数据显示时,可以使用$t(‘’)了:
computed: {
i18n() {
return this.$t('index')
}
},
3、使用
// popup是zh和en文件中自定义的字段名
<view>{{$t('popup.title')}}</view>
注:引入的zh和ch语言的文件内容如下
1、lang/zh/index.js
export default {
form: {
phone_email: '手机号/邮箱',
password: '密码',
message: '忘记密码',
},
btn: {
submit: '登录',
next: 'next'
},
popup: {
title: '所属机构',
complate: '完成'
}
}
2、lang/en/index.js
export default {
form: {
phone_email: 'Phone number/email address',
password: 'password',
message: 'Forget the password',
},
btn: {
submit: 'Log On',
next: 'next'
},
popup: {
title: 'Organization',
complate: 'Done'
}
}
例如:通过按钮控制语言的切换
// html
<button @click="toCN" type="warn">切换中文</button>
<button @click="toEn" type="primary">切换英文</button>
// js
methods:{
// 中英文切换,通过locale的值来修改语言设置
toCN() {
this.$i18n.locale = "zh"
},
toEn() {
this.$i18n.locale = "en"
}
}