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

Love The Way You Lie 2022-11-17 14:47 1572阅读 0赞

### 文章目录 ###

*  前言
 *  一、国际化使用方案
 *  二、i18n配置及使用

--------------------

# 前言 #

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

--------------------

# 一、国际化使用方案 #

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

# 二、i18n配置及使用 #

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

npm install vue-i18n --save

1.  配置  
    因为项目里面全部都是需要用到这个插件的，所以封装了一个文件  
    ![在这里插入图片描述][20210410152911311.png_pic_center]  
    en  
    里面的文件是分模块处理的，为了后期语言删减或修改更好的维护  
    ![在这里插入图片描述][20210410153326778.png_pic_center]

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",
    }

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

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

[20210410152911311.png_pic_center]: /images/20221022/d10476073bab4b3aba8d6be15a3c947b.png
[20210410153326778.png_pic_center]: /images/20221022/63c8af63471f490abb95260d02799fcc.png