Registrar el uso de la internacionalización vue i18n

    Si el marco vue considera varios idiomas, puede usar vue-i18n. Para instalarlo, agregue directamente la biblioteca dependiente al proyecto vue actual a través de npm install vue-i18n --save. Además, necesitamos configurar archivos multilingües. Aquí usamos chino e inglés como ejemplos. Creamos un nuevo directorio de idiomas en el directorio de activos, y luego creamos nuevos zh.json y en.json, que se utilizan para almacenar archivos internacionalizados correspondientes a sus respectivos idiomas.

    Dado que el archivo multilingüe está en formato json, naturalmente puede contener objetos y anidamiento de objetos. Aquí organizamos nuestros archivos multilingües a través de atributos de objetos y anidamiento. Los contenidos son los siguientes:

    zh.json

{
	"common":{
		"name":"用户名",
		"password":"密码"
	},
	"Settings":{
		"set":"设置",
		"ok":"确定",
		"cancel":"取消",
		"languageSelect":"语言选择"
	}
}

    en.json

{
	"common":{
		"name":"username",
		"password":"password"
	},
	"Settings":{
		"set":"Set",
		"ok":"Ok",
		"cancel":"Cancel",
		"languageSelect":"Language Select"
	}
} 

    El contenido de los dos documentos es la mejor correspondencia uno a uno, aunque en teoría solo se puede comparar el contenido de ambos lados.

    A continuación, cómo introducir vue-i18n en la página, necesitamos agregar el objeto i18n al objeto de montaje vue. Aquí se toma el proyecto vue ordinario como ejemplo. En el archivo main.js, importamos i18n importando Vue-I18n de 'vue-i18n'. Luego, necesitamos usar Vue.use (Vue-I18n) para indicar en el proyecto vue Para usar i18n, debemos importar el archivo de internacionalización que configuramos anteriormente y finalmente agregarlo al punto de montaje vue, el código es el siguiente:

import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'

Vue.config.productionTip = false
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('@/assets/languages/zh.json'),
    'en': require('@/assets/languages/en.json')
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

    Cabe señalar aquí que nuestro idioma predeterminado es el chino, por lo que debemos configurar i18n.locale = 'zh'. De esta forma, ya hemos hecho los preparativos. El resto es cómo usar varios idiomas en la página. Generalmente, en el cuerpo de la etiqueta del elemento HTML, debe agregar llaves {{}} y luego usar $ t ( 'Settings.set'), en el código javascript, no necesitamos llaves, solo $ t ("Settings.set").

    Hemos agregado una página para configurar el idioma, el contenido es el siguiente: 

    Settings.vue

<template>
  <div class="setting">
    <h2>{{$t('Settings.languageSelect')}}</h2>
    <button @click="changeZh">中文</button>
    <button @click="changeEn">English</button>
  </div>
</template>
<script>
export default {
  name: 'Settings',
  data () {
    return {}
  },
  methods: {
    changeZh () {
      this.$i18n.locale = 'zh'
    },
    changeEn () {
      this.$i18n.locale = 'en'
    }
  }
}
</script>

    La página de configuración del idioma es muy simple, hay dos botones, haga clic en ellos para cambiar el idioma, aquí para cambiar el idioma es modificar el valor de i18n.locale, como se mencionó anteriormente, el valor predeterminado es 'zh', si se cambia a inglés es 'en '. Cuando se cambia el idioma, el contenido de la página cambiará. Echemos un vistazo al efecto de la operación real:

     

    Vue-i18n multi-idioma, de hecho, se enfoca principalmente en dos lugares, uno está en el cuerpo de la etiqueta HTML, cómo usar {{$ t ('Settings.set')}}, y el otro es cómo usar $ t ('directo en código JavaScript Settings.set '). La diferencia entre ellos es la doble llave {{}} en el cuerpo de la etiqueta.