vue-i18n国际化

在 Vue 3 中使用 Vue I18n 的用法与 Vue 2 类似，但有一些细微的差别。下面是在 Vue 3 中使用 Vue I18n 的基本用法：

1. 安装 Vue I18n

   通过 npm 或 yarn 安装 Vue I18n：

   npm install vue-i18n@next
   

2. 创建语言文件

   在你的项目中，创建一个目录用于存放语言文件，例如 lang，然后在该目录下创建每个语言的 JSON 文件。每个文件包含一个 JSON 对象，其中键是文本的 key，值是对应语言的翻译：

   // lang/en.json
   {
     "greeting": "Hello",
     "message": "Welcome to my app"
   }
   
   // lang/fr.json
   {
     "greeting": "Bonjour",
     "message": "Bienvenue dans mon application"
   }
   

3. 创建 Vue I18n 实例并挂载到应用程序

   在你的应用程序的入口文件中，导入 Vue I18n 并创建一个 Vue I18n 实例。可以根据需要配置该实例，例如设置默认语言和加载语言文件。然后，使用 createApp 方法创建 Vue 应用程序，并将 Vue I18n 实例作为插件进行注册：

   import { createApp } from 'vue'
   import { createI18n } from 'vue-i18n'
   import en from './lang/en.json'
   import fr from './lang/fr.json'
   import App from './App.vue'
   
   const i18n = createI18n({
     locale: 'en', // 默认语言
     messages: {
       en, // 英文语言文件
       fr, // 法语语言文件
     }
   })
   
   const app = createApp(App)
   app.use(i18n)
   
   app.mount('#app')
   

4. 在 Vue 组件中使用翻译文本

   在 Vue 3 中，你可以使用 $t 方法或 t 函数来访问翻译的文本。可以在模板中或 JavaScript 中使用这些方法：

   <!-- 模板中 -->
   <template>
     <div>
       <p>{
        
        { $t('greeting') }}</p>
       <p>{
        
        { $t('message') }}</p>
     </div>
   </template>
   
   <!-- JavaScript 中 -->
   <script>
   import { useI18n } from 'vue-i18n'
   
   export default {
     setup() {
       const { t } = useI18n()
   
       // 使用 t 函数访问翻译文本
       console.log(t('greeting'))
       console.log(t('message'))
   
       return {}
     }
   }
   </script>
   

以上就是在 Vue 3 中使用 Vue I18n 的基本用法。记得根据具体需求进一步了解 Vue I18n 的高级功能，如日期、数字格式化，动态语言切换等。详细的 API 文档和示例可以在 Vue I18n 的官方网站上找到：https://vue-i18n.intlify.dev/zh/