uniapp使用vue-i18n前端国际化Afrigo(跨境电商)需要用到国际化切换做个总结1.目录结构2.准备好vue

Afrigo(跨境电商)需要用到国际化切换做个总结

1.目录结构

2.准备好vue-18n.js文件

源码地址：github.com/menglin1997…

3.lang 文件夹下面写国际化语言的逻辑

我需要用的是法语和英语两种语言的切换:

获取设备信息，并保存本地目的: 是为了知道用户手机用的是什么语言，方便用户一进来看到的就是他设备设置的语言，我这里是将获取到的信息全部保存了（项目中需要），也可以只保存system_info.language 代码如下（写在lang/index.js文件中）：

import LangEn from './en.js'
import LangFr from './fr.js'
import Vue from 'vue'
import VueI18n from './vue-i18n'
Vue.use(VueI18n)
const system_info = uni.getStorageSync('system_info')
if (!system_info) {
    // 获取设备信息
    uni.getSystemInfo({
        success: function (res) {
            uni.setStorageSync('system_info', res);
        }
    })
}
    const cur_lang = system_info.language.indexOf('en')!==-1  ? 'en' : 'fr'
    const i18n = new VueI18n({
        locale: cur_lang || 'en',  // 默认选择的语言
        messages: {  
                'en': LangEn,
                'fr': LangFr
            }
    })
    export default i18n

4.main.js引入

  import Vue from 'vue'
  import App from './App'

  Vue.config.productionTip = false

  App.mpType = 'app'

  import i18n from './lang/index' 
  Vue.prototype._i18n = i18n
  const app = new Vue({
      i18n,
          ...App
  })
  app.$mount()

5.项目中引入

uniapp 不支持在取值表达式中直接调方法，因此，$t方法不可用，所以通过计算属性的方式：

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text>{{ i18n.game }}</text>  
        </view>
        <button type="primary" @tap="change">切换语言</button>
    </view>
</template>

6.关于原生组件的国际化（原生tabbar,navabr）

1.tabbar
computed里引入i18n后,tabbar的设置最佳在onshow生命周期里（组件都完全挂载完毕）

2.navbar 与tabbar不同，最佳设置时间为onReady

uniapp使用vue-i18n前端国际化