项目主要通过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 = '';
}