【插件】vue-i18n的安装和使用全解

        vue-i18n是Vue.js的国际化插件，它提供了丰富的API和配置选项，支持多种语言切换、语言资源管理、日期时间格式化等功能，能够满足不同场景下的国际化需求。

1.  项目准备

在开始之前，请确保已经具备以下条件：

Vue.js项目环境：已搭建好的Vue.js项目，建议使用Vue CLI创建。

Node.js环境：已安装Node.js和npm。

2. 安装vue-i18n

使用npm安装vue-i18n

npm install vue-i18n

3. 配置并使用vue-i18n

3.1. 创建语言资源文件

        在项目中创建一个locales文件夹，用于存放不同语言的资源文件。例如，创建en-US.json和zh-CN.json分别存放英文和中文的语言资源。（你也可以使用js文件存储）

//  /locales/zh-CN.json
{"hello":"你好","farewell":"再见","welcomeMessage": "你好, {name}! 你有{count}条新信息."
}//  /locales/en-US.json
{"hello":"Hello","farewell":"Goodbye","welcomeMessage": "Welcome, {name}! You have {count} new messages."
}

3.2. 创建i18n实例

        在main.js或单独的配置文件中创建vue-i18n实例，并配置语言资源和默认语言：

// main.tsimport zhCN from '@/components/locales/zh-CN.json'
import enUS from '@/components/locales/en-US.json'
import App from './App.vue'const i18n = createI18n({legacy: false, // 使用vue3的组合式apilocale: 'zhCN', // 默认语言fallbackLocale: 'enUS', // 回退语言messages: {zhCN,enUS}
})export const app = createApp(App)
app.use(i18n)
app.mount('#app')

3.3. 在template中使用     

        在 template 中，通过t函数来获取翻译文本。

        t函数来获取翻译文本。t函数来获取翻译文本。t函数的第一个参数是翻译键，第二个参数是一个包含变量的对象（如果有变量需要传递）。

（1）基础用法

<template><div><!-- 使用$t函数获取翻译文本 --><p>{{ $t('hello') }}</p></div>
</template>

（2）使用变量

<template><div><!-- 使用$t函数并传递变量 --><p>{{ $t('welcomeMessage', { name: '苏西', count: 2 }) }}</p></div>
</template>

3.4. 在 script 中使用

        在 script 中，无论是组合式 API 还是选项式 API，都可以通过相应的方式获取$t函数（或useI18n获取的t函数）来进行翻译操作，并传入变量以得到带有动态内容的翻译文本。

        以vue3的组合式 API为例：

<template><div><!-- 显示翻译后的文本 --><p>{{ translatedMessage }}</p></div>
</template><script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();// 定义传递信息的变量
const nameInfo = { name: '苏西', count: 2 }
// 获取翻译文本并传入变量
const translatedMessage = t('welcomeMessage', nameInfo)</script>

4. 动态切换语言

        通过修改locale的值，可以实现语言的切换。

<template><div><button @click="changeLanguage('zhCN')">中文</button><button @click="changeLanguage('enUS')">English</button></div>
</template><script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()function changeLanguage(lang) {locale.value = langconsole.log('locale.value', locale.value)
}
</script>

Tips：若使用中有问题，注意看控制台是否有报错，根据报错做对应的修改。