vue3 i18n 多语言切换

vue3中实现多语言切换

  1. 下载插件 npm install vue-i18n@next,@next表示安装i18n 最新的 vue3的版本
  2. 创建 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'
  },
}
  1. main.ts 中注册 i18n
js 复制代码
1.  // main.ts
1.  import i18n from './language/i18n'
1.
1.  const app = createApp(App)
1.  ...
1.  app.use(i18n) // 挂载语言包
  1. 点击按钮切换语言
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>
  1. 在需要文字说明的组件中使用
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>
相关推荐
十里青山1 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45310 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^11 分钟前
条件渲染 v-show与v-if
前端
棉花糖超人19 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
小小小小宇7 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊7 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习8 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖9 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js