(最简单,详细,直接上手)uniapp/vue中英文多语言切换
官方文档
uni-app官网
1.安装
npm install vue-i18n --save
2.体会多语言切换
hello-i18n 示例工程 - DCloud 插件市场
这里面是一个官方的demo可以参考并且把它下载运行起来体会一下语言切换
uni-app官网
这个是uniapp的官方文档可以做参考(项目着急的话,直接可以参考下面的文章)
3.将语言包导入到自己的项目
把从官方里面的那个demo项目里面的local文件夹直接复制到自己的项目根目录里面,跟demo一样
4.main.js 引入并初始化 VueI18n
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
const messages = {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
let i18nConfig = {
locale: uni.getLocale(),// 获取已设置的语言
messages
}
// VUE2
// #ifndef VUE3
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
i18n,
...App
})
app.$mount()
// #endif
// VUE3
// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'
const i18n = createI18n(i18nConfig)
export function createApp() {
const app = createSSRApp(App)
app.use(i18n)
return {
app
}
}
5.使用
页面模板中使用 $t()
获取,并传递国际化json文件中定义的key,js中使用 this.$t('')
注意:页面中设置语言后需要调用 this.$i18n.locale = '要更改的语言'
后生效
6.可能刚开始会有坑
Fall back to translate ‘用户中心‘ key with ‘zh‘ locale.这样类似的问题
1.一般情况下是没有定义’xxxx’字段对应的翻译
2.仔细看一下要更改的语言与下面的K值是否匹配的上