傻瓜式uni-app/h5/app 中接入i18n国际化（切换语言）

难点：之前没接触过国际化，也没整过切换语言，以为类似翻译呢，结果不是

知识点：得用到vue-i18n这个第三方，接下来一起看看如何傻瓜式接入

先看uni官方的文档｜点击这里，查看官方文档----vue界面和js内容的国际化

1.先下载对应的插件或者使用插件市场引进来，都行

pnpm install -D vue-i18n

2.main.js里引入插件

let i18nConfig = {
  locale: uni.getLocale(),
  messages
}

import VueI18n from 'vue-i18n'
// 这个是语言包，放置各种语言的json文件
import messages from './locale/index'



Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)

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

3.设置默认语言

onShow: function() {
  if (!uni.getLocale()) {
    // 这里的zh-Hans要和你配置的json名字对上
    uni.setLocale("zh-Hans");
  }
}

4.创建你要切换的语言包，在项目根目录下，和page同级创建文件夹locale

        4.1 locale下创建文件index.js

import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
import thai from './thai.json'
import korean from './korean.json'
import russian from './russian.json'
import japanese from './japanese.json'
export default {
  en,
  'zh-Hans': zhHans,
  'zh-Hant': zhHant,
  japanese: japanese,
  russian: russian,
  korean: korean,
  thai: thai,
}

        4.2 在locale下创建各种json语言文件比如japanese.json和korean.json

        这里如果产品或者甲方不提供语言包，推荐一下，可以使用简体中文的直接让chatgpt翻译生成，好用的一批

{
  "password.new-password": "新しいパスワード",
  "password.old-password": "古いパスワード",
  "password.input-new-password": "新しいパスワードを入力してください",
  "password.input-new-password2": "新しいパスワードを再度入力してください",
  "password.input-old-password": "古いパスワードを入力してください",
  "password.confirm-password": "パスワードを確認",
  "password.set-capital-password": "資金パスワードを設定",
  "password.set-login-password": "ログインパスワードを設定",
  "public.confirm": "확인"
}

{
  "password.new-password": "새 비밀번호",
  "password.old-password": "이전 비밀번호",
  "password.input-new-password": "새 비밀번호 입력",
  "password.input-new-password2": "새 비밀번호 다시 입력",
  "password.input-old-password": "이전 비밀번호 입력",
  "password.confirm-password": "비밀번호 확인",
  "password.set-capital-password": "자금 비밀번호 설정",
  "password.set-login-password": "로그인 비밀번호 설정",
  "public.confirm": "確認"
}

5.如何切换语言和使用，我使用了uview的ui，你们可以自己改成自己的ui

用法就是$t('public.confirm')

<template>
  <view class="lang">
    <u-cell-group>
      <u-cell :arrow="false" v-for="(val, index) in langList" @click="selectLangIndex = index" :key="index"
        :title="val.title">
        <u-icon v-if="selectLangIndex == index" slot="right-icon" size="40rpx" name="checkbox-mark"></u-icon>
      </u-cell>
    </u-cell-group>
    <u-button v-if="!isWx" type="primary" :text="$t('public.confirm')" shape="circle" @click="switchLang">
    </u-button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        langList: [{
          title: "简体中文",
          name: "zh-Hans",
        }, {
          title: "繁體中文",
          name: "zh-Hant",
        }, {
          title: "English",
          name: "en",
        }, {
          title: "Русский",
          name: "russian",
        }, {
          title: "ภาษาไทย",
          name: "thai",
        }, {
          title: "日本語",
          name: "japanese",
        }, {
          title: "한국어",
          name: "korean",
        }],
        selectLangIndex: 0,
      };
    },
    mounted() {
      console.log(uni.getLocale());
      this.selectLangIndex = this.langList.findIndex(item => item.name === uni.getLocale())
      this.selectLangIndex = this.selectLangIndex <= 0 ? 0 : this.selectLangIndex;
      uni.setLocale(this.langList[this.selectLangIndex].name);
    },
    methods: {
      switchLang() {
        let code = this.langList[this.selectLangIndex].name;
        uni.setLocale(code);
        this.$i18n.locale = code;
      }
    }

  }
</script>

<style lang="scss">
  .lang {
    >.u-button {
      margin-top: 30rpx;
      box-shadow: 0 5rpx 10rpx 1rpx $uni-color-primary;
      width: 90%;
    }
  }
</style>

---

到这里国际化就告一断落了，但是还有uni自带的一些也需要国际化，比如uni.showToast的提示文案

6.接着在locale下创建对应的json，比如uni-app.xxx.json，这里只要配置上即可，不用单独再引入

比如uni-app.japanese.json，japanese要和你上面4.1中创建的对应的语言的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": "OK",
    "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": {}
}

结语：到这里就基本完成了，接着就快乐的开发吧～～～如有疑问可以评论或者私信我