internacionalización vue-i18n

El uso de Vue I18n en Vue 3 es similar al de Vue 2, pero existen algunas diferencias sutiles. El siguiente es el uso básico de Vue I18n en Vue 3:

1. Instalar Vue I18n

   Instale Vue I18n mediante npm o hilo:

   npm install vue-i18n@next
   

2. Crear archivos de idioma

   En su proyecto, cree un directorio para contener archivos de idioma, por ejemplo lang, y luego cree archivos JSON para cada idioma en ese directorio. Cada archivo contiene un objeto JSON, donde la clave es la clave del texto y el valor es la traducción del idioma correspondiente:

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

3. Cree una instancia de Vue I18n y móntela en la aplicación

   En el archivo de punto de entrada de su aplicación, importe Vue I18n y cree una instancia de Vue I18n. Puede configurar la instancia según sea necesario, como configurar el idioma predeterminado y cargar archivos de idioma. Luego, createAppcree una aplicación Vue usando el método y registre la instancia Vue I18n como complemento:

   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. Usar texto traducido en componentes de Vue

   En Vue 3, puede utilizar $tmétodos o tfunciones para acceder al texto traducido. Estos métodos se pueden utilizar en plantillas o en 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>
   

Lo anterior es el uso básico de Vue I18n en Vue 3. Recuerde conocer más sobre las funciones avanzadas de Vue I18n según necesidades específicas, como fecha, formato de números, cambio dinámico de idioma, etc. Puede encontrar ejemplos y documentación API detallada en el sitio web oficial de Vue I18n: https://vue-i18n.intlify.dev/zh/