vue3_ts_el-plus は、言語切り替えの国際化を完了するように i18n を構成します

1.依存関係をインストールする

npm install vue-i18n

2. 新しい i18n フォルダーを作成する 

i18n 構成ファイル index.ts を作成する

3. 設定ファイル

// 创建语言列表，不同语言的内容
const messages = {
  en: {
    msg: {
      // showeara
      showtext: 'hello world',
      // menu
      menu_userinfo: 'user infomation',
    },
  },
  zh: {
    msg: {
      // 显示区域
      showtext: '你好世界',
      // 菜单
      menu_userinfo: '用户信息',
    },
  },
};

const locale = 'zh'; // 创建本地标识，通过修改它来控制全文的语言环境

import { createI18n } from 'vue-i18n'; // 导入createI18n方法

const i18n = createI18n({
  // 使用 Composition API 模式，则需要将其设置为false
  legacy: false,
  // 全局注入 $t 函数
  globalInjection: true,
  locale,
  messages, // 这是定义好的语言表
});

export default i18n; // 导出 i18n

4. main.ts にインポートしてマウントする

// i18n
import i18n from '@/i18n';

app.use(i18n).mount('#app');

 5. Vue コンポーネントの実装

1. html で $t() のグローバル メソッドを使用するのは比較的簡単です。

2.スクリプトで使用するにはインポートが必要です

// script 中
const { t } = i18n.global;
const active_text = computed(() => {
  return t('msg.nav_light_color');
});

言語切り替え vue コンポーネント: 

コードは以下のように表示されます: 

<template>
  <el-dropdown class="langselect" triggle="click" @command="handleSelect">
    <div class="langbox">
      <span :style="{ color: textcolor }">{
   
   { $t('msg.nav_langselect') }} </span>
      <img class="langicon" src="../../public/lang.png" alt="" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="language === 'zh'" command="zh">
          中文
        </el-dropdown-item>
        <el-dropdown-item :disabled="language === 'en'" command="en">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import store from '@/store/index';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import vars from '@/scss/vars/index.module.scss';

const language = computed(() => {
  return store.state.language;
});

// 文字样式
// const textbg: any = computed(() => {
//   store.state.textbg;
// });
const textcolor = vars.elpricol;

// 切换语言的方法
const i18n = useI18n();
const handleSelect = function (lang: string) {
  // 切换local
  i18n.locale.value = lang;
  // vuex
  store.commit('setLanguage', lang);
  // 提示
  ElMessage.success('切换成功！');
};
</script>

<style lang="scss" scoped>
.langselect {
  .langbox {
    display: flex;
    align-items: center;
    .langicon {
      width: 26px;
      margin-left: 5px;
    }
  }
}
</style>