1. Descargue el complemento il8n. La versión il8n descargada actualmente a través de npm install vue-il8n no es compatible con vue3.0, por lo que debe usar npm install vue-i18n@next para obtener la última versión. La versión que tengo aquí es ^9.0.0-beta.17
npm install vue-i18n@next yarn add vue-i18n@next(个人推荐)2. Cree un nombre de archivo llamado idioma en src y cree cuatro archivos js (chino, inglés, japonés, coreano) en el archivo: zh-CN, en, ja y ko.
3. Luego escriba los métodos correspondientes en los cuatro archivos js. El idioma que queremos cambiar se almacena aquí. El siguiente es el idioma japonés que escribí en el archivo llamado ja.js. El mismo método se usa en los otros tres archivos. escribir en secuencia
4. Cree un archivo index.js en el archivo de idioma.
5. Cree un archivo il8n en el archivo de idioma.
6. Introducir en main.js
7. Utilice { {$t('message.storeBacode')}} en el componente para mostrar en la página
8. Cuando se usa en js, en vue2.0 es esto $t('message.storeBacode'), pero en vue3.0 esto se ha cancelado, por lo que es proxy. $t('message.storeBacode'),
1. Introduzca getCurrentInstance en vue y monte getCurrentInstance
2. El uso de proxy.$t('message.unlimited') en reactivo informará un error
Solución: introduzca useI18n() y use el formato t('message.canceled') para la representación de la página. Lo mismo se puede usar en js. No se necesita proxy para operar, pero cuando se introduce, const {t} = useIl8n() debe escribirse antes de reactivo
No es necesario escribir métodos de operación de proxy
¿Por qué usar t en lugar de $t ( el siguiente método no entra en conflicto con $t, la razón por la que se usa t es para resolver el problema del informe de errores en reactivo )
$tEs una función de la instancia de Vue18n. Tiene las siguientes ventajas y desventajas: puede usar la sintaxis de bigote de manera flexible en plantillas {}y también puede usar accesorios y métodos calculados en instancias de componentes de Vue. Sin embargo, las desventajas también son obvias: se ejecutará cada vez que se produzca una nueva representación. , por lo que efectivamente hay un costo de traducción.
vt(t) tiene mejor rendimiento que $tlas funciones y, debido a que es posible su traducción temprana proporcionada por el módulo compilador VUE de Vue, la extensibilidad internacional permite más optimizaciones de rendimiento. Pero los inconvenientes también son obvios: por muy $tflexible que sea su uso, es bastante complejo. El contenido traducido v-tse insertará textContenten el elemento. Además, cuando utiliza la representación del lado del servidor, debe configurar directiveTransformsopciones de transformación personalizadas para compilela función @vue/compiler-ssr.
9. Cambiar idioma dentro del componente (puntos clave)
1. Malentendido (en vue2.0, es correcto usar this.$il8n.locale = 'cn' para lograr el cambio de idioma, pero en vue3.0, aunque el proxy es equivalente a esto en vue2.0, esto es un (Error al cambiar el idioma y el fondo mostrará un mensaje indefinido . Aunque il8n está realmente montado en este momento y la configuración regional también informará un error , no sé cuál es el problema ni cómo resolverlo).
2. Solución (aunque no sé cuál fue la situación, al final el problema se solucionó, veamos la solución)
1. Imprima el proxy, luego busque la matriz disponibleLocales en il8n, vea los varios idiomas que queremos configurar antes y luego lo sacamos.
2. Saque las configuraciones locales disponibles en il8n y renderícelas en select. Por supuesto, debe hacer algunos cálculos antes de hacer esto. De lo contrario, lo que se imprimirá será cn, en, ja, ka. Como desarrolladores, podemos entender esto nosotros mismos, pero para los usuarios, es incomprensible
1. Calcule y convierta (si escribió el método, recuerde devolverlo; de lo contrario, obtendrá un error si no puede encontrar el método)
2. Renderizar en la página
<el-select v-model="$i18n.locale" placeholder="请选择" @change="languageBtn($event)">
<el-option
v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale" :label='LanguageComputing(locale)'>
</el-option>
</el-select>
3. Imprime los resultados
1. Antes de cambiar (el valor predeterminado es inglés, local también es en)
2. Después de cambiar el idioma (al mostrar japonés, el local también se vuelve ja)
Nota: Todavía no he usado { {$t('message.storeBacode')}} para representar en la página
¿Lo has aprendido? Si te gusta recuerda darle me gusta, seguirlo y recogerlo.