（最简单，详细，直接上手）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值是否匹配的上