Vue实现国际化处理

最新推荐文章于 2025-02-21 15:26:05 发布

原创最新推荐文章于 2025-02-21 15:26:05 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中实现国际化处理，包括安装相关插件、配置国际化文件（zh.ts、en.ts）、设置国际化配置文件（index.ts），并在main.ts中注册插件。在组件中，可以使用`$t()`获取国际化内容，通过`useI18n`方法的`locale.value`来切换语言。整个过程基于查表思想，将需切换的语言内容存储于语言包，然后动态获取。

1 安装插件

npm install vue-i18n@next

2 在src 目录下配置国际化文件locales, 并且创建语言表，和配置文件

zh.ts

 export default {
    layout: {
        Home: '首页',
        
    }
}

en.ts

 export default {
    layout: {
        Home: 'home',
        
    }
}

国际化配置文件

index.ts

import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import zh from './zh'  // 中文语言包
import en from './en'  // 英文语言包
 
// 实例化I18n
const i18n = createI18n({
    legacy: false, //处理报错Uncaught (in promise) 
    locale: "zh", // 初始化配置语言
    messages: {
        zh,
        en
    }
})
 
export default i18n

在到mian.ts中注册插件

import i18n from './locales/index'  // 引入
import App from './App.vue'

createApp(App)
    .use(i18n)    //加载

这样我们就可以在组件中使用国际化了

1 获取 =>{{$t(layout.Home)}}

2 改变语言

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <button  @click="change('zh')">中文</button> --
 
  <router-view />
</template>
 
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
 
const { locale } = useI18n()
    function change(type: string) {
      locale.value = type;
    }
</script>

总结：国际化的本质查表的思想

1：将我们项目中的所有需要切换语言内容存放到语言包中

2：在将我们所有需要却换内容的地方国际化获取到动态的数据 {{ $t(表中对应的内容)}}}

3：在通过 useI18n 这个方法返回对象中的数据 locale.value 改变语言