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


前言

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


一、国际化使用方案

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

二、i18n配置及使用

  1. 引入i18n插件依赖
    首先,我们将i18n插件引入到项目中,安装依赖的方式就不多赘述了,我使用的是npm安装
	npm install vue-i18n --save
  1. 配置
    因为项目里面全部都是需要用到这个插件的,所以封装了一个文件
    在这里插入图片描述
    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>

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

  • 2
    点赞
  • 7
    收藏
  • 打赏
    打赏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论 7

打赏作者

她的鼻孔有星辰

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值