uniapp多语言实现（二）

项目引入vue-i18n实现国际化多语言，vue-i18n包 自行下载，放到libs目录下，在main.js中引入

//main.js
import Vue from 'vue'
import App from './App'
//多语言引入
import VueI18n from './libs/vue-i18n'
import en from './common/js/en.js'//英文
import cn from './common/js/cn.js'//中文
Vue.use(VueI18n)
const i18n = new VueI18n({
	locale: 'cn', //当前语言中文;
	// locale:'en',
	messages: {
		'en': en,
		'cn': cn,
	}
})
Vue.prototype._i18n = i18n
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    i18n,
    ...App
})
app.$mount()

uniapp 不支持在取值表达式中直接调方法，因此，$t方法不可用，所以通过计算属性的方式：

• 切换语言

data() {
	return {
		current: this.$i18n.locale == 'cn' ? 'cn' : 'en',//判断是中文还是英文
	}
},
methods: {
	//点击事件切换语言
	radioChange(e){
		if(e.detail.value === 'cn'){
			this.$i18n.locale = 'cn';
			this.current = 'cn';
		}else{
			this.$i18n.locale = 'en';
			this.current = 'en';
		}
	},
}

cn.js，en.js结构如下

//cn
export default {
    message: {
        home:"首页",
	}
}

//en
export default {
    message: {
        home:"home",
	}
}

uniapp多语言实现（二）_Yfw的博客-CSDN博客_uniapp多语言