在vue3中通过vue-i18n实现国际化多语言切换

之前有在react中介绍过如何使用i18n去实现国际化，那么，在vue里想要实现国际化一般也需要用到i18n这个库，接下来介绍如何使用这个库。

一、安装

在你的vue项目中执行以下命令进行安装。

pnpm install vue-i18n

二、配置

1、创建文件目录

我这里以中文、英语、日语三种语言切换为例，在src下创建locale文件夹，文件夹下创建index.ts、en.ts、ja.ts、zh.ts文件，index.ts为i18n的配置文件，en.ts对应的是英语文档，ja.ts对应的是日语文档，zh.ts对应的是中文文档；一个系统如果需要做国际化，那么文档里的内容还是比较多的，所以最好分开维护。

这是我创建好的文件目录。

2、index.ts配置

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

const i18n = createI18n({
    locale:'ja',
    legacy:false,
    messages:{
        en:en,
        ja:ja,
        zh:zh
    }
})
export default i18n

可以看到其配置是非常简单的，这里一定要注意legacy一定要设置为false，否则后面在其他页面中使用i18n的api时会报错。

3、语言模板文档编写

en.ts

const en={
    message:{
        hello:'hello world',
    }
}
export default en

ja.ts

const ja = {
    message:{
        hello:'こんにちは、世界'
    }
}
export default ja

zh.ts

const zh={
    message:{
        hello:'你好'
    }
}
export default zh

因为写的是demo，我的语言文档内容比较简单，里面就一条语言模板，你可以自行添加其他的。

三、使用

在页面中使用i18n之前，我们还需要将刚才配置的index.ts文件在vue的main文件中挂载注册才能使用。

main.ts

import { createApp } from 'vue'
import App from './App.vue'

import i18n from "./locale/index";

const app=createApp(App)

app.use(i18n)

app.mount('#app')

在页面中使用

<template>
    <div style="height: 50%;display: flex;justify-content: center;align-items: center">
        <div>{{ $t('message.hello') }}</div>
    </div>
</template>

在页面中使用也非常简单，直接$t('文档里定义的对象')，可以看到我们文件里定义了message对象下定义了hello，在页面里就可以直接$t('message.hello')将你翻译好的语言展示出来了。

四、语言切换

想要实现语言动态切换也是非常简单的，直接引入i18n中的api方法即可，就是修改locale属性，

在页面中引入useI18n方法，在方法中解构出locale属性，修改这个属性即可实现动态切换语言。

我这里放出demo源代码供参考。

<template>
  <div style="width: 100%;height: 100%">
    <div style="display: flex;justify-content: center">
      <el-select
          v-model="selectValue"
          placeholder="Select"
          size="large"
          style="width: 240px"
          @change="languageChange"
      >
        <el-option label="中文" value="zh"/>
        <el-option label="English" value="en"/>
        <el-option label="日本語" value="ja"/>
      </el-select>
    </div>
    <div style="height: 50%;display: flex;justify-content: center;align-items: center">
      <div>{{ $t('message.hello') }}</div>
    </div>
  </div>
</template>

<script setup>
import {useI18n} from 'vue-i18n'

const {locale} = useI18n()

onMounted(()=>{
  selectValue.value = locale.value
})
const selectValue = ref('')
const languageChange = (value) => {
  locale.value = value
}
</script>

<style scoped>

</style>

实现效果