uniapp 使用 i18n 实现多语言切换（vue 也是一样的）

1.准备语言包(js文件 )

const Chinese = {
	language:"中文",
	China:"中国"
}
const English = {
	language:"language",
	China:"China"
}
//导出中文包和英文包如果还有别的语言自己添加即可
export {
	Chinese,
	English
}

2.在main.js导入i18n并使用 

a）（导入语言包）language.js 就是我上面的那个文件

b）导入前使用npm安装下i18n  (npm install i18n --save)

//导入i18n
import VueI18n from 'vue-i18n'
//导入语言包
import {English,Chinese} from "common/util/language.js"
//使用i18n
Vue.use(VueI18n)

//本地缓存uni.getStorageSync("language") 有的时候使用本地缓存没有使用en-us 也就是默认英文版

const i18n = new VueI18n({  
  locale:  uni.getStorageSync("language")||'en-US',  
  messages: {  
    'en-US': {  
      index: English
    },  
    'zh-CN': {  
      index: Chinese
    }  
  }  
})

Vue.prototype._i18n = i18n

const app = new Vue({
	i18n,
    ...App
})

3.在别的页面切换语言（比如在app设置页面）

 

{{i18n.language}} //使用i18n定义的语言包


	中文


	English



methods:{
/*val 是参数 比如传zh-CN 是代表切换中文 en-US 切换为英文 
缓存使用来做app 长久语言类型保存的上面第一步提到过
为什么this._i18n.locale 可以改变语言类型因为挂载到原型链上了，this 指向 vue 
vue 的原型链上面是有_i18n.locale 会从当前实例一级一级往下寻找_i18n.locale 如果找到vue 的object底层都没有找到_i18n.locale就会爆出未定义的错误 （不清楚原型链的可以百度下）
*/
methods:{
//比如你点击语言切换指向该方法即可
			setLanguage(val){
				uni.setStorageSync("language",val)
				this._i18n.locale = val;
			},
}