Vue3 debe usar la versión 9.* al usar i18n
"vue-i18n": "^9.2.2"
Tabla de contenido
1.3, habrá una advertencia en este momento
3.1, Mensajes vinculados (información asociada)
3.2, Modificadores incorporados (modificadores incorporados)
3.3 Modificadores personalizados
3.4, mensajes HTML (información HTML)
4. Pluralización (diversificación)
1. Descarga y usa
npm
npm install vue-i18n@9hilo
yarn add vue-i18n@9idioma
1.1 Crear configuración
Cree la carpeta lang y luego cree cn.ts, en.ts y el index.ts más importante dentro
cn.ts
const messages = {
home: {
title: '书城',
hint: '计算机科学和软件工程',
guessYouLike: '猜你喜欢'
}
}
export default messagesa.ts
const messages = {
home: {
title: 'Book Store',
hint: 'Computer Science And Software Engineering',
guessYouLike: 'Guess You Like',
}
}
export default messages
índice.ts
import { createI18n } from 'vue-i18n'
import en from './en'
import cn from './cn'
//引入的不同语言文件
const messages = {
en, cn
}
//这个类型可以自己配置，毕竟每个人做的都不一样
const i18n:any =createI18n( {
legacy: false, // 使用 Composition API 模式，则需要将其设置为false
globalInjection: true, //全局生效$t
locale: 'cn', // 默认cn翻译
messages //ES6解构
})
export default i18n;Si desea configurar otros archivos, puede agregar
vue principal.ts
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './lang/index.js'
const app = createApp(App)
app.use(i18n);
app.mount('#app')1.2 Uso básico
En cualquier componente, es lo mismo que se muestra en la siguiente
Parámetros de uso:
- ruta: requerido, la clave de información local
- locale: opcional, locale (esto ha sido configurado en 1.1 y puede ser modificado por pinia o almacenamiento)
- argumentos: opcional, para lista o formato con nombre (dicho en 2.0)
<template>
//使用 $t
<span> {
{ $t("home.title") }} </span>
//使用 t （要解构）
<p>{
{t("home.title")}}</p>
//使用v-t , 这个数据是没有的，只是用来展示如何使用v-t
<p v-t="{path:'title',args: {count: 10 }}"></p>
//使用翻译组件
// keypath:必传,和上面path参数一样 tag:可选，转为什么标签
// locale:可选，要用哪个语言环境 scope：可选，全局还是局部 `global` or `parent`
// i18n:可选，优先级比scope高，参数也多，用的也不多，就不介绍了
<i18n-t keypath='home.title' tag="p" locale='en' scope="global"></i18n-t>
</template>
<script setup lang='ts'>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<style lang='less' scoped></style>1.3, habrá una advertencia en este momento
警告：Está ejecutando la compilación esm-bundler de vue-i18n. Se recomienda configurar su paquete para reemplazar explícitamente las marcas globales de características con literales booleanos para obtener una sacudida de árbol adecuada en el paquete final.
Instalar
npm install @intlify/vite-plugin-vue-i18nvite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'
//引入resolve
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
//配置vueI18n
vueI18n({
include: resolve(__dirname, './path/to/src/locales/**')
})]
})
La solución de advertencia proviene de Star House
2. Interpolación
Solo modifique el archivo cn.ts a continuación
2.1, llamada interpolación
definir interpolación
const messages = {
home: {
title: `书城{a}{b}`,
}
}
export default messagesusar
<template>
<p>
{
{ $t("home.title", {a:'123',b:'9999'}) }}
</p>
</template>Efecto
2.2 Interpolación de listas
definir interpolación
const messages = {
home: {
title: `书城{0}{1}`,
hint: '计算机科学和软件工程{0}',
guessYouLike: '猜你喜欢'
}
}
export default messagesLa interpolación de listas define la secuencia de sintaxis de bigote a partir de 0,
Nota: cuando se usa, el subíndice de la matriz corresponde al valor de la lista en sus corchetes {}
usar
<template>
<p>
{
{ $t("home.title", ['一二','四五六']) }}
</p>
<p>
{
{ $t("home.hint", ['123']) }}
</p>
</template>Efecto
2.3, interpolación de texto
La interpolación literal es principalmente útil para caracteres especiales en la sintaxis de formato de mensaje,
Ejemplo: { } @ $ |
Estos no están disponibles directamente en el mensaje.
Formato de definición: {' X '} Use comillas entre paréntesis
const messages = {
home: {
title: `书城{'{'}这是一个书城{'}'}`,
}
}
export default messages
Si usa un título directamente como este: `Ciudad del libro{Esta es una ciudad del libro}`, informará un error
Traducción: mensaje de error de compilación: token no válido en el marcador de posición 'Esta es una librería'
3, mensajes
3.1, Mensajes vinculados (información asociada)
Rol: juntar diferentes valores
Formato: @:clave
//定义 ，这不是cn.ts文件的只是修改下，把代码减少
export default {
book:'流浪地球',
author:'刘慈欣',
cover: "@:book - @:author",
}
//使用
<template>
<p>
{
{ $t("cover", ) }}
</p>
</template>
3.2, Modificadores incorporados (modificadores incorporados)
Formato: @.modificador:clave
superior: escribe en mayúsculas todos los caracteres del mensaje de vínculo
inferior: escribe en mayúsculas todos los caracteres del mensaje de vínculo
mayúsculas: escribe en mayúscula el primer carácter del mensaje de vínculo
export default {
homeAddress: 'Home address',
upper: '@.upper:homeAddress'
}
<template>
<p>{
{ $t('homeAddress') }}</p>
<p>{
{ $t('upper') }}</p>
</template> 
3.3 Modificadores personalizados
const i18n:any =createI18n( {
locale: 'cn', // 默认cn翻译
messages,
// 在' modifiers '选项设置自定义修饰符
modifiers: {
//别问为什么是any，问就是不知道怎么解决
snakeCase: (str:any) => str.split(' ').join('_')
}
})El uso también es el mismo que el de 3.2
export default {
homeAddress: 'Home address',
upper: '@.snakeCase:homeAddress'
}
3.4, mensajes HTML (información HTML)
También puede usar etiquetas html y luego usar v-html para analizar, pero los requisitos de v-html deben ser claros para usted.
//定义
export default {
cover:'hello <br> world'
}
//使用
<template>
<p v-html="$t('cover')"></p>
</template>
4. Pluralización (diversificación)
export default {
car: 'car | cars',
apple: 'no apples | one apple | {count} apples'
}
//使用------
<template>
<p>{
{ $t('car', 1) }}</p>
<p>{
{ $t('car', 2) }}</p>
<p>{
{ $t('apple', 0) }}</p>
<p v-t="{ path: 'apple',args: 2 }"></p>
<p>{
{ t('apple', 1) }}</p>
<p>{
{ $t('apple', 10, { count: 10 }) }}</p>
// plural:必传，9.2.2的预期不够好，不能绑定对象，只能绑定值
<i18n-t keypath="message.plural" :plural="n">
//要给传的复数，并且还要写值下来，就算是唯一一个值也要写，不然就是空
<template #count> {
{ n }} </template>
</i18n-t>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const n= ref(4)
</script>
//结果------
<p>car</p>
<p>cars</p>
<p>no apples</p>
<p>2 les</p>
<p>one apple</p>
<p>10 les</p>
<p>4 les</p>Algunos métodos que respaldan la diversificación son: Además de $tc que se muestra arriba
1. $tc (solo válido para legado establecido en verdadero, no importa usarlo )
2. comando personalizado vt (personalizado por i18n, consulte 1.2 uso básico)
3. Componente de traducción incorporado (i18n-t) (actualmente no recomendado, más problemático)
4. Usa la deconstrucción t para usar i18n
5. Inyectar $t globales,
parámetros implícitos predefinidos
Los parámetros implícitos se refieren al segundo parámetro de (valor clave, parámetro implícito, {xxx:x}), y el tercero es el parámetro de visualización.
El parámetro implícito puede especificar el segundo valor definido, pero su prioridad no es tan alta como el tercer parámetro,
Por ejemplo:
//定义 export default { apple: 'no apples | one apple | {count} les | { count } apples ' } //使用 <template> <p>{ { $t('apple', 0) }}</p> //结果 no apples <p>{ { $t('apple', 1) }}</p> //结果 one apple <p>{ { $t('apple', 2) }}</p> //结果 2 les <p>{ { $t('apple', 3) }}</p> //结果 3 les <p>{ { $t('apple', 4, { count: 10 }) }}</p> //结果 4 les </template>La última línea no tuvo el efecto que esperaba. Probablemente sea un error. Después de todo, esto ha estado cambiando y realmente no se ha estabilizado.
Mi expectativa es de 10 manzanas, pero no sé adónde irán.
Múltiples definiciones de plural, para personalizar , de lo contrario, solo se mostrará el primer plural
Aspecto específico personalizado: sitio web oficial de vue-i18n
Sitio web chino (no es el sitio web oficial, la versión es 8.*, hay una cierta referencia): Vue I18n v8.x manual