uni-app的国际化即 多语言切换 使用vue-i18n

vue和js里的内容国际化是与web通行的方案。

main.js 引入并初始化 VueI18n

注意 推荐使用vue-i18n@9.1.9固定版本

安装 vue-i18n，可以通过以下命令安装：

npm install vue-i18n

 

1.在main.js中引入i18n

import App from './App'
import messages from './locale/index'

let i18nConfig = {
  locale: 'en', // 设置默认语言,
  messages
}

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.use(uView)
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
    i18n,
  ...App
})    
app.$mount()
// #endif

// 导入 uView 组件
import uView from '@/uni_modules/uview-ui'
import MqttConnection from './utils/mqttConnection.js';
const brokerUrl = 'wxs://mqtt.rare-soft.com:443/mqtt'
                    
const clientId = new Date().getTime()
const mqttConnA = new MqttConnection(brokerUrl, clientId);
Vue.prototype.$mqttConn = mqttConnA;
// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'
const i18n = createI18n(i18nConfig)
export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n) 
  return {
    app
  }
}
// #endif

2.创建一个local 目录 然后配置语言json文件

 uni-app.zh-Hans.json 文件

{
  "common": {
    "uni.app.quit": "再按一次退出应用",
    "uni.async.error": "连接服务器超时，点击屏幕重试",
    "uni.showActionSheet.cancel": "取消",
    "uni.showToast.unpaired": "请注意 showToast 与 hideToast 必须配对使用",
    "uni.showLoading.unpaired": "请注意 showLoading 与 hideLoading 必须配对使用",
    "uni.showModal.cancel": "取消",
    "uni.showModal.confirm": "确定",
    "uni.chooseImage.cancel": "取消",
    "uni.chooseImage.sourceType.album": "从相册选择",
    "uni.chooseImage.sourceType.camera": "拍摄",
    "uni.chooseVideo.cancel": "取消",
    "uni.chooseVideo.sourceType.album": "从相册选择",
    "uni.chooseVideo.sourceType.camera": "拍摄",
    "uni.previewImage.cancel": "取消",
    "uni.previewImage.button.save": "保存图像",
    "uni.previewImage.save.success": "保存图像到相册成功",
    "uni.previewImage.save.fail": "保存图像到相册失败",
    "uni.setClipboardData.success": "内容已复制",
    "uni.scanCode.title": "扫码",
    "uni.scanCode.album": "相册",
    "uni.scanCode.fail": "识别失败",
    "uni.scanCode.flash.on": "轻触照亮",
    "uni.scanCode.flash.off": "轻触关闭",
    "uni.startSoterAuthentication.authContent": "指纹识别中...",
    "uni.picker.done": "完成",
    "uni.picker.cancel": "取消",
    "uni.video.danmu": "弹幕",
    "uni.video.volume": "音量",
    "uni.button.feedback.title": "问题反馈",
    "uni.button.feedback.send": "发送"
  },
  "ios": {},
  "android": {}
}

3.修改底部导航

（1）在pages.json 中 使用 %%占位

 （2）在App.vue中使用uni.setTabBarItem 方法修改

 4.在manifest.json 中设置默认语言（和 pages.json 一致）

5.页面模板中使用 $t() 获取，并传递国际化json文件中定义的key，js中使用 this.$t('')

<template>
  <view class="container">
    <view class="title">{{$t('index.title')}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>