uni-app使用i18n实现国际化多语言配置(封装)

---

前言

入职公司以来，一直都是uni开发，由于是海外项目，所以肯定要用到国际化插件，也算是自己的一个突破。所以想记录下来，哈哈哈，没有用过的孩子，也可以学习使用一下

---

一、国际化使用方案

uni-app是基于vue.js的，因此国际化的方案也是使用的 i18n 插件

二、i18n配置及使用

1. 引入i18n插件依赖
   首先，我们将i18n插件引入到项目中，安装依赖的方式就不多赘述了，我使用的是npm安装

	npm install vue-i18n --save

2. 配置
   因为项目里面全部都是需要用到这个插件的，所以封装了一个文件
   
   en
   里面的文件是分模块处理的，为了后期语言删减或修改更好的维护
   

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages() {
    const locales = require.context('.', true, /[A-Za-z0-9-_,\s]+\/index\.js$/i)
    const messages = {}
    locales.keys().forEach(key => {
        messages[key.replace('./', '').replace('/index.js', '')] = locales(key).default
    })
    return messages
}

// console.log(Object.entries(loadLocaleMessages().en).reduce((prev,[k,v])=>`${prev}\n"${k}","${v}"`,'"中文","English"'))

const locale = process.env.VUE_APP_I18N_LOCALE || (process.env.NODE_ENV === 'production' ? 'id' : 'zh')
const i18n = new VueI18n({
    locale,
    fallbackLocale: locale,
    messages: loadLocaleMessages()
})

let lang = uni.getStorageSync("lang") || "es"

i18n.locale = lang

Vue.prototype._i18n = i18n
export default i18n

然后在main.js里引入并挂载

import i18n from './i18n';

const app = new Vue({
    i18n,
    store,
    ...App
})

index.js里面已经都给配置好了，默认语言设置，也可以针对手机系统语言设置，最最主要的是上面的loadLocaleMessages()方法，返回不同的语言

下面是en或es里面的文件内容

export default {
    "验证码":"Verification Code",
    "再次搜取":"Reacquire",
    "工作信息":"Work info",
    "经济来源":"Source of Income",
    "收益水平":"Income Level",
    "公司电话":"Company Phone",
}    

export default {
    "验证码":"Código de verificación",
    "再次搜取":"Volver a adquirir",
    "工作信息":"Información de trabajo",
    "经济来源":"Fuente de ingreso",
    "收益水平":"Nivel de ingreso",
    "公司电话":"Teléfono de la empresa",
}    

使用(你快要成功了，最后一步)

<view class="title">
	{{ $t("验证码") }}
</view>

至于效果就不给大家贴图片了，感兴趣的可以动手试试，不明白下方评论