Ejemplo de instalación y configuración de vue-i18n, e introduce el uso en texto de plantilla, método de componente, js, método f

Vue-i18n es un componente internacional de un proyecto que puede cambiar entre múltiples versiones de idioma. Muchos proyectos de Vue usan este complemento para manejar el cambio de idioma.

operación básica

1. Referencia de instalación:

$ npm install vue-i18n

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

2. Introduzca vue-i18n en main.js

import VueI18n from 'vue-i18n' 
 
Vue.use(VueI18n) // 通过插件的形式挂载 
 
const i18n = new VueI18n({
    
     
    locale: 'zh-CN',    // 语言标识 
    //this.$i18n.locale // 通过切换locale的值来实现语言切换 
    messages: {
    
     
      'zh-CN': require('./common/lang/zh'),   // 中文语言包 
      'en-US': require('./common/lang/en')    // 英文语言包 
    } 
}) 
 
/* eslint-disable no-new */ 
new Vue({
    
     
  el: '#app', 
  i18n,  // 记住要添加上
  store, 
  router, 
  template: '<App/>', 
  components: {
    
     App } 
}) 

3. Cree un archivo js, ​​procese los modos en y zh, y luego cambie esto.$i18n.locale

Paquete de idioma inglés en.js :

export const m = { música: 'Música',//Netease Cloud Music findMusic: 'BUSCAR MÚSICA',//buscar música myMusic: 'MI MÚSICA',//mi música amigo: 'AMIGO',//amigo músico: ' MUSICIAN',//Descarga de músico: 'DOWNLOAD'//Download client }

Paquete de idioma chino zh.js :

export const m = { música: 'Netease Cloud Music', findMusic: 'descubrir música', myMusic: 'mi música', amigo: 'amigo', músico: 'músico', descargar: 'descargar cliente' }

4. Método de cambio de idioma

Cómo cambiar un evento de clic en mi componente.

 changeLangEvent() {
    
    
   this.$confirm('确定切换语言吗?', '提示', {
    
    
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
    }).then(() => {
    
    
       if ( this.lang === 'zh-CN' ) {
    
    
          this.lang = 'en-US';
          this.$i18n.locale = this.lang;//关键语句
       }else {
    
    
          this.lang = 'zh-CN';
          this.$i18n.locale = this.lang;//关键语句
       }
    }).catch(() => {
    
    
       this.$message({
    
    
           type: 'info',
       });          
    });
}

El punto clave aquí es la ''declaración clave'': this.$i18n.locale, cuando asigna el valor 'zh-CN', la barra de navegación se convertirá en chino, cuando el valor es 'en-US', se convierte en inglés .

Uso de escenario

El uso del complemento de internacionalización vue.js vue-i18n, las instrucciones de uso en el texto de la plantilla, el método del componente, js y el método de devolución:

1. Use { {$t("xxx")}} en el texto

{ {$t(“registrar.registrar”)}}

2. Usa $t('xxx') en el método del componente

:título=“tipo===1 ? $t('seleccionarDispositivo') : $t('seleccionarProducto')”

3. Usar en el método js: this.$i18n.t('xxx')

esto.$i18n.t('registrar.imgCodeFirst')')

este. $yo18norte\_t{(}^{\prime }disban{d}_{pag}^{})+\text{'}$ {ele.nombre} `+ esto.$i18n.t('capa')

4. En el método devuelto después de la solicitud

Si se usa en el método devuelto después de la solicitud, debe definir una variable arriba, var this_ = this; y luego use this_ inside para usarla normalmente

Toast.info(this_.$i18n.t('register.getMsgCodeSucceed'));

5. Cómo escribir el código en data()

label:this.$t('mensaje.en'),

Si el contenido está en una matriz u objeto, la solución oficial es sugerir que escribamos la expresión en el atributo calculado en lugar de los datos.