uni-app 多语言，国际化

向右看齐 2022-08-28 10:40 230阅读 0赞

问题描述：因为做到项目有海外用户所以需要配置多语言满足客户需求。

解决方法：在uni-app里有内置i18n多语言的配置，并且uni-app里的组件可是可以支持跟随设置语言进行变换的，i18n的主要功能是可以做到实时切换语言。

## 1.配置语言包 ##

先每种语言新建一个js文件用于，配置语言包再引入，注意**语言包里的变量命名需一致**

//中文简体zh-CN.js
    export default { 
    	
    	login: { 
    		title: '登录',
    		page_1: '密码登录',
    		page_2: '短信登录',
    		page_3: '忘记密码?',
    		page_4: '免费注册',
    		page_5:'下一步',
    		page_6:'立即体验',
    
    		tips_1: '请输入手机号',
    		tips_2: '请输入密码',
    		tips_3: '请输入验证码',
    		tips_4:'无效的手机号',
    		btn_1: '登录',
    	},
    	
    }

//中文繁体zh-WT.js
    export default { 
    	
    	login: { 
    		title: '登錄',
    		page_1: '密碼登錄',
    		page_2: '短信登錄',
    		page_3: '忘記密碼?',
    		page_4: '免費註冊',
    		page_5:'下一步',
    		page_6:'立即體驗',
    
    		tips_1: '請輸入手機號',
    		tips_2: '請輸入密碼',
    		tips_3: '請輸入驗證碼',
    		tips_4:'無效的手機號',
    		btn_1: '登錄',
    	},
    }

这是文件目录  
![在这里插入图片描述][1714efd74d7a41949703ea567d1e96e8.png]

为了语言简洁我特意将语言包配置的的代码新建了一个文件后再引入mian.js

import fontCN from './zh-CN.js'; //简体语言包
    import fontWt from './zh-WT.js'; //繁体语言包
    import fontUS from './US.js'; //英文语言包
    
    import VueI18n from 'vue-i18n'; //引入实时切换
    Vue.use(VueI18n);
    
    const i18n = new VueI18n({ //设置默认语言为简体
    	locale: uni.getStorageSync('language_key')? uni.getStorageSync('language_key'):'zh-Hant-HK',
    	messages: { 
    		'zh-Hans': fontCN,//简体
    		'zh-Hant-HK': fontWt,//繁体
    		'en':fontUS,//英文
    	}
    })
    export default i18n;

关于i18n语言包里的命名参考[uni-app 内置国际化方案说明][uni-app]**uni-app的组件才能跟随你设置的语言进行切换**

后再mian.js里引入

import i18n from 'static/language/index.js';//引入语言配置
    Vue.prototype.$font = i18n;
    
    const app = new Vue({ 
    	i18n,
    	...App
    })

## 2.页面引入 ##

<view class="optionType">
    			<navigator url="forgetPwd">{
       {i18n.page_3}}</navigator>
    			<navigator class="cyan" url="register">{
       {i18n.page_4}}</navigator>
    		</view>

export default { 
    		computed: { //需要使用computed引入才会生效
    			i18n() { 
    				return this.$t('login')
    			},
    			data(){ 
    				return{ 
    					test:'',
    				}
    			},
    			onload(){ 
    				//在js代码里使用
    				this.test=this.i18n.page_1
    			}
    	}

## 3.切换语言 ##

import language from '@/static/language/index.js'//引入语言包配置文件
    
    
    uni.setStorageSync('language_key',需要设置的语言包名称);//设置缓存
    language.locale=需要设置的语言包名称;//设置当前语言实时切换
    //注意：语言包名称为在语言包配置文件里配置的名称

希望此文能帮助您，欢迎评价交流  
如需转载请附上原文链接

[1714efd74d7a41949703ea567d1e96e8.png]: /images/20220828/8d7a75710f104b638a665a6c9a6959c0.png
[uni-app]: https://ask.dcloud.net.cn/article/38821