vue3中实现多语言切换

下载插件 npm install vue-i18n@next,@next表示安装i18n 最新的 vue3的版本
创建 language 文件夹，并创建 i18n.ts

i18n.ts 文件示例

js 复制代码

// i18n.ts
 
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

const i18n = createI18n({
    legacy: false, // 使用CompotitionAPI必须添加这条.
    locale: 'zh', // 默认语言
    // fallbackLocale: 'en', // 默认第二语言
    messages: {
        zh,
        en
    }
})

export default i18n

zh.ts 文件示例

js 复制代码

//.ts
export default {
  header: {
    langLable: '选择语言',
    langZH: '中文',
    langEN: '英文',
  },
  setting: {
    settingsModuleMenuTree: {
      General: '常规设置',
      Account: '账号设置',
      Email: '邮箱设置',
      Calendar: '日历设置',
      Interface: '界面布局',
      Keyboard: '快捷键设置',
      Extended: '扩展功能',
      About: '关于SEmail...',
    },
    homeText: '显示名称',
    mineText: '个人中心'
  },
}

en.ts 文件示例

js 复制代码

//en.ts
export default {
  header: {
    langLable: 'Select Language',
    langZH: 'Chinese',
    langEN: 'English',
  },
  setting: {
    settingsModuleMenuTree:{
      General: 'General Settings',
      Account: 'Account Settings',
      Email: 'Email settings',
      Calendar: 'Calendar Settings',
      Interface: 'Interface Layout',
      Keyboard: 'Keyboard shortcuts',
      Extended: 'Extended functionality',
      About: 'About SEmail',
    },
    homeText: 'homepage',
    mineText: 'Personal Center'
  },
}

在 main.ts 中注册 i18n

js 复制代码

1.  // main.ts
1.  import i18n from './language/i18n'
1.
1.  const app = createApp(App)
1.  ...
1.  app.use(i18n) // 挂载语言包

点击按钮切换语言

js 复制代码

<template>
	<div>
		 <el-select :placeholder="t('header.langLable')" style="width:155px">
              <el-option :label="t('header.langZH')" value="zh" @click="changeLanguage('zh')" />
              <el-option :label="t('header.langEN')" value="en" @click="changeLanguage('en')" />
            </el-select>
	</div>
</template>

js 复制代码

<script lang = 'ts' setup>
import { useI18n } from 'vue-i18n'
const { locale, t } = useI18n()

const changeLanguage = (value: string) => {
	locale.value = value
}
<script>

在需要文字说明的组件中使用

js 复制代码

// 使用的 xxx.vue
<script setup lang="ts">
    import { useI18n } from "vue-i18n";
    const { t } = useI18n()
</script>
 
<template>
     <p>{{t('setting.homeText') }} </p>
     <el-form-item :label="t('setting.homeText') + ':'">
        <el-input v-model="accountAppDisplay" placeholder="界面上, 显示的名称" />
     </el-form-item>
</template>

js 复制代码

<span>{{$t("setting.homeText")}}</span>

注意，$t()是个函数，"setting.homeText"是它的参数，是一个字符串，相当于传入了对象的key值。
如果需要动态绑定怎么办呢，比如，我们循环渲染，如下段代码所示：

js 复制代码

{{$t('setting.settingsModuleMenuTree.' + item.value)}}

js 复制代码

<template>
  <div>
    <el-menu class="menu">
            <el-menu-item v-for="(item, idx) in settingsModuleMenuTree" :index="idx + ''" class="menu-item">
              {{$t('setting.settingsModuleMenuTree.' + item.value)}}
            </el-menu-item>
          </el-menu>
  </div>
</template>
<script setup lang="ts">
    import { useI18n } from "vue-i18n";
    const { t } = useI18n()
    
    const settingsModuleMenuTree = ref<any[]>([]);
    settingsModuleMenuTree.value = [
      { name: "常规设置", value: 'General' },
      { name: "账号设置", value: 'Account' },
      { name: "邮箱设置", value: 'Email' },
      { name: "日历设置", value: 'Calendar' },
      { name: "界面布局", value: 'Interface' },
      { name: "快捷键设置", value: 'Keyboard' },
      { name: "扩展功能", value: 'Extended' },
      { name: "关于SEmail...", value: 'About' },
    ];
</script>

vue3 i18n 多语言切换

vue3中实现多语言切换