La internacionalización del proyecto vue vue-i18n y pisar el foso para resolver la hermana pequeña te enseñan la internacionalización de VUE ~

1. Instalación y configuración

-Instalar $ npm install vue-i18n

o:

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

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    fallbackLocale: 'zh-CN',//没有英文的时候默认中文语言
    silentFallbackWarn: true,//抑制警告
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文语言包
      'en-US': require('./common/lang/en')    // 英文语言包
    }
})

window.vm = new Vue({
  el: '#app',
  i18n,  // 不要忘记
  store,
  router,
  template: '<App/>',
  components: { App }
})

--- ok, esto es lo que es la introducción, así que desde la realización de la internacionalización, aquí hay un simple cambio entre chino e inglés, entonces, naturalmente, necesitamos dos conjuntos de archivos de idioma en chino e inglés, vue-i18n es relativamente simple, solo se necesitan dos js El archivo se importa a main.js en forma de require.

en.js paquete de idioma inglés:

export const lang = { 
  test: 'English',//英文
}

Paquete de idioma chino zh.js:

export const lang = {
  test:'中文',
}

Finalmente, solo necesitamos controlar el valor de la configuración regional activando el evento y llamar al paquete de idioma correspondiente para lograr la internacionalización.

--- Cómo cambiar el valor de la configuración regional en el componente para lograr el cambio de idioma.

locale: 'zh-CN',    // 语言标识
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文语言包
      'en-US': require('./common/lang/en')    // 英文语言包
    }

En el código de main.js, puede ver que cuando el valor de la configuración regional es 'z-CN', la versión es en chino; cuando el valor de la configuración regional es 'en-US', la versión es en inglés. Por supuesto, también puede cambiar a zh y en, esto no es fijo, solo debe corresponder.

Bien, ahora echemos un vistazo a cómo cambiar un evento de clic en mi componente.

<div @click="changeLangEvent" class="changeLang"></div>

changeLangEvent() {
      if ( this.lang === 'zh-CN' ) {
        this.lang = 'en-US';
        this.$i18n.locale = this.lang;//关键语句      
      }else {
        this.lang = 'zh-CN';
        this.$i18n.locale = this.lang;//关键语句      
      }
    }

2. Gramática

Implementación en el archivo vue:

// 普通：
<span>{
   
   {$t('lang.test')}}</span>
// placeholder:
<input type="text" v-model="description" :placeholder=" $t('lang.test')" >
// 三目运算:
<span>{
   
   {flag?flag:$t('lang.test')}}</span>

Llame al campo de varios idiomas en el código js:

// TODO：写法:this.$t('lang.test');
// TODO：因为js里面的数据无法实时刷新，所以需要写在computed里面
computed:{
      testName: function () {
        return this.$t('lang.test');
      },
    }

--- Si se trata de datos de enlace bidireccional, debe configurar

computed:{
   mailAuthTxt: { //获取验证码--倒计时
      get() {
        if(this.isCountDown){
          return this.$t('dc_lang.获取验证码');
        } else {
          return this.countDown;
        }
      },
      set() {
        if(this.isCountDown){
          return this.$t('dc_lang.获取验证码');
        } else {
          return this.countDown;
        }
      }
  }
}

Escribiendo en common.js:

//因为common.js没有在vue文件中。所以$t.('xxxx')写法会报错。所以在main.js中写
window.vm= new Vue({});

window.vm.$i18n.t('lang.test');

 

Pregunta 1: Después de actualizar la página, el estado de mi idioma se restaurará a su estado original. Así que usé sessionStorage para almacenar el estado de mi idioma.

//国际化
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

let lang = window.sessionStorage.getItem('lang')||'zh-CN';
const i18n = new VueI18n({
    locale: lang,    // 语言标识
    fallbackLocale: 'zh-CN',//没有英文的时候默认中文语言
    silentFallbackWarn: true,//抑制警告
    // this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
        'zh-CN': require('../static/js/lang/zh.js'),   // 中文语言包
        'en-US': require('../static/js/lang/en.js')    // 英文语言包
    }
})

changeLangEvent() {
      if ( this.lang === 'zh-CN' ) {
        this.lang = 'en-US';
        this.$i18n.locale = this.lang;//关键语句
        window.sessionStorage.setItem('lang', this.lang);
      }else {
        this.lang = 'zh-CN';
        this.$i18n.locale = this.lang;//关键语句
        window.sessionStorage.setItem('lang', this.lang);
      }
    }

Pregunta 2: Modifique el título en index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <title>我的网站名</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
  document.getElementsByTagName("title")[0].innerText = window.vm.$i18n.t('lang.我的网站名');
</script>
</html>

  

--- Hay cuatro soluciones de internacionalización vistas anteriormente en Internet. La traducción del complemento de Google es muy inexacta, no lo considere. Dos conjuntos de chino e inglés son muy difíciles, así que no pienso en eso. También escribí la traducción de freeMarker antes, simplemente devuélvala al front-end y agréguela directamente.

Tener tiempo para estudiar tran.js

Eso es todo ~~~ Date un corazón ~