uni-app使用vue-i18n实现国际化(中英文切换)

最新推荐文章于 2024-07-30 10:33:05 发布

XiaoNan12138

最新推荐文章于 2024-07-30 10:33:05 发布

阅读量1.9k

点赞数 1

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/XiaoNan12138/article/details/124269548

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

uni-app使用vue-i18n实现国际化(中英文切换)
1.导入vue-i18n(npm install vue-i18n)
在这里插入图片描述
2.创建common文件夹 --> lang.js

export default {
	'zh-CN': {
		lang: 'zh',
		index: {
			title: '简体中文',
			text: '一切皆有可能'
		}
	},
	'en-US': {
		lang: 'en',
		index: {
			title: '英文',
			text: 'everything is possible'
		}
	}	
}

3.在main.js中引入vue-i18n及相关文件
在这里插入图片描述

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './common/lang.js'
Vue.use(VueI18n)
const i18n = new VueI18n({  
  locale: localStorage.getItem('language') === '2' ||  localStorage.getItem('language') === null ? 'en-US' : 'zh-CN',  // 默认选择的语言(1:中文,2:英文<这里默认英文>)
  messages 
})
Vue.prototype._i18n = i18n
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	i18n,
    ...App
})
app.$mount()

4.在页面使用
在这里插入图片描述

5.切换语言
在这里插入图片描述

	// 未选择vuex的原因是,uniapp刷新页面后vuex的数据会重置
	// 切換英文
	changeEn () {
		this._i18n.locale = 'en-US'
		let count = this.$t('lang') === 'zh' ? 1 : 2
		// this.$store.commit('setLang', count)
		localStorage.setItem('language', count)
	},
	// 切換中文
	changeCn () {
		this._i18n.locale = 'zh-CN'
		let count = this.$t('lang') === 'zh' ? 1 : 2
		// this.$store.commit('setLang', count)
		localStorage.setItem('language', count)
	}