uniapp实现多语言开发

uniapp实现多语言开发

第一步

首先先npm下载vue-i18n,之后就会看到node_modules中多了一个vue-i18n的文件

npm vue-i18m

第二步

在main.js文件中进行多语言的配置,引用

import VueI18n from "vue-i18n" //引入刚下载的vue-18n
import enLang from "./base/en-us.js" //引入自定义的语言包
import zhLang from "./base/zh-cn.js"
import frenLang from "./base/fren-ch.js"

Vue.use(VueI18n)

//这里进行判断默认选择的语言
if(['zh-cn','en-us'].indexOf(uni.getStorageSync('locale'))==-1){
	uni.setStorageSync('locale', 'zh-cn') //默认中文
}

// 注意这里 
// locale 是本地存储的正使用的语言
// messages 是自定义的语言包
const i18n=new VueI18n({
	locale:uni.getStorageSync('locale'),
	messages:{//必须是messages
		'zh-cn':zhLang,
		'en-us':enLang,
		'fren-ch':frenLang
	}
})

Vue.prototype._i18n = i18n

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

第三步

在页面上如何使用 和改变语言

// lang_i18n就是 当前使用的语言对应的语言包里面的数据,页面上通过{{lang_i18n.属性名}}就可以拿到数据
computed: {
		lang_i18n() {
			return this.$t('message') 
		}
	},

改变当前的语言

handLang(index) {
				let lang = 'zh-cn'
				switch (index) {
					case 0:
						lang = 'zh-cn'
						break;
					case 1:
						lang = "en-us"
						break;
					case 2:
						lang = "fren-ch"
						break;
				}
				this.$refs.popChina.close()
				uni.setStorageSync('locale', lang)
				this.$i18n.locale = lang// 改变在main.js中定义的locale
				console.log(i18nType);
				this.change()
				this.getLocation()
				this.getBanner()
			},

放一下语言包


最后,多语言的项目,一些固定的文字就需要定义在语言包中,通过vue-i18n改变语言的类型改变语言包,就需要语言包中字段名一致的,整个项目写下来,这个过程比较麻烦,需要手动去定义不同语言的文字,那其他需要通过后台传过来的数据,就需要在改变语言的时候,改变请求头的langage,接着调用接口,后端就可以返给不同语言的数据,这一步就看你的后端怎么安排了

初次接触多语言,就记录一下下 ,正在学习中.如有错误之处,还望指点