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 = '';
		}