在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-selectv-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>