vue腳架,uniapp項目多語言配置

項目主要通過vue-i18n配置多語言,通過npm命令下載依賴

npm install vue-i18n --save

通過命令我們會得到一個vue-i18n的依賴包

創建語言包lang.js,這裏我只列舉了中文和英文，其他語言類比，如果語言多種的話  建議分開寫  每種語言對應一個JS文件庫，通過export default或者文件引入的方式把語言包引入到lang文件中，在把lang暴露出去

lang的配置目錄結構

    最外層下標爲所選語言

   子下標對應的是每個頁面所需要多語言的配置參數  比如登錄頁  那我就會配置一個 login : {key : value}的對象，註冊頁面 我就配置 與login同級的  register ：{key : value} 的對象  以此類推 ，如下圖

export default {
	'en-US': {
		lang: 'en',
		login: {
			title : 'There are free lunches',
			account : 'account',
			username: 'Enter your phone number',
			password: 'Enter your password',
			forgot: 'Forget password',
			submit: 'Sign in',
			bottom: 'No account yet?',
			link: 'Register'
		},
		register: {
			real : 'real'
		}
	},
	'zh-CN': {
		lang: 'zh',
		login: {
			title : '天下有白吃的午餐',
			account : '賬號',
			username: '請輸入您的手機號',
			password: '請輸入您的密碼',
			forgot: '忘記密碼',
			submit: '登錄',
			bottom: '還沒有賬號？',
			link: '立即註冊'
		},
		register: {
			real : '實名認證'
		}
	},
}

在mian.js中引入對應的文件，並且掛載到對應的VUE實例對象上

import VueI18n from 'vue-i18n'
import messages from './common/lang.js'；
Vue.use(VueI18n)
const i18n = new VueI18n({
	locale: 'zh-CN',
	messages
})
Vue.prototype._i18n = i18n;
const app = new Vue({
	i18n,
	...App
})

這樣我們就配置好了，可以在項目中調用了

在對應的頁面的computed監聽il8n,在需要多語言的地方引入就可以了

<template>
	<view >	
		<form>
			<view class="form">
				<view class="form-item">
					<view class="label">{{i18n.account}}</view>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		computed:{
			i18n() {
				return this.$t('login')
			}
		}
	}
</script>

<style lang="scss">

</style>

在入口文件 APP.vue做語言的處理，判斷當前系統要顯示的語言

let lan = 'en';
		try {
			const res = uni.getSystemInfoSync(); //獲取本地記錄的語言體，也可以獲取系統的語言類型，看項目需求而定
			if (uni.getStorageSync('lang')) {
				lan = uni.getStorageSync('lang');
			} else {
				lan = res.language;
			}
			this._i18n.locale = lan;
		} catch (e) {
			lan = '';
		}