Tabla de contenido

1, i18n

1.1, instalación i18n

i18nEs internationalizationla abreviatura de esta palabra. Toma la primera letra iy la última letra n. Hay 18 letras en el medio, por lo que se escribe cuando se combinan i18n. Este es un vuecomplemento para la internacionalización. Puede integrar fácilmente algunas funciones de localización. en su aplicación Vue.js

//使用yarn
yarn add vue-i18n 
//npm
npm i vue-i18n -S

2. El uso de i18n

2.1, estructura de archivos

srcCree i18nuna carpeta en el directorio, escriba la configuración de idioma ( archivo json) en configla carpeta y index.jssea responsable de la configuración modular.

2.2, configuración de idioma

src/i18n/config/en.json

{   
    "table": {//表格信息
        "date": "Date",
        "name": "Name",
        "address": "Address"
    },
    "language": {//语言切换时按钮跟着切换
        "Chinese": "Chinese",
        "English": "English"
    }
}

src/i18n/config/zh.json

{   
    "table": {//表格信息
        "date": "时间",
        "name": "姓名",
        "address": "地址"
    },
     "language": {//语言切换时按钮跟着切换
        "Chinese": "中文",
        "English": "英文"
    }
}

2.3 Configuración modular

src/i18n/index.js

import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)//注入到所有的子组件

//require.context(path，deep，regExp)
//有3个方法 分别是keys() 


let langFileds = require.context('./config'， false， /\.js$/)

let regExp = /(.*\/)*([^.]+).*/ //正则用于匹配

// regExp.exec('./en.js')

let messages = {} //声明一个数据模型，对应i18n中的message属性

langFileds.keys().forEach(key => {
    let prop = regExp.exec(key)[1] //正则匹配文件名（en|zh这样的值）
    //messages[prop]相当于 messages['en'] = {table:{...}}
    messages[prop] = langFileds(key).default

})
console.log(messages);
console.log(langFileds('./en.js'));

let locale = localStorage.getItem('lang') || "zh" //从localstorag中获取，初始化语言

export default new VueI18n({
    locale，//指定语言字段
    messages,//定义语言字段
    silentTranslationWarn:true//去除警告
})

2.4 Introducir la modularidad en man.js

src/principal.js

import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

import i18n from "./i18n"

new Vue({
  render: h => h(App),
  i18n //挂载
}).$mount('#app')

2.5, sintaxis i18n

Después de completar la configuración de acuerdo con los pasos anteriores, Vuehabrá dos atributos más $i18ny los atributos en $t, $i18nson los atributos que exponemos cuando configuramos i18n de manera modular. Podemos cambiar el idioma a través del atributo locale de este atributo ( es decir: ) this.$i18n.locale. En su lugar $t, se puede zh.jsonleer desde el archivo de idioma (por ejemplo:) por valor de clave.

<template>
    <div>
        <h1>{
   
   { $t('table.date') }}</h1>
        <select
           @change="handleChange()"
           v-model="language">
            <option value='Chinese'>{
   
   { $t('language.Chinese') }}</option>
            <option value='English'>{
   
   { $t('language.English') }}</option>
        </select>
    </div>
</template>

<script>
export default {
    name:'lang',
    data(){
        return {
            language:'Chinese'
        }
    },
    methods: {
        handleChange(){
            this.$i18n.locale = this.language
        }
    },
}
</script>

Artículo de referencia: Zhihu: le enseña cómo utilizar la internacionalización en vue

Enseñarle cómo usar la internacionalización en Vue