SoFunction
Updated on 2025-04-10

Introduction and usage examples of vue project configuration internationalization $t('') and usage examples

Preface

In the vue project, $t('') directly calls this function in html {{ $t('') }}

$t is a method that was hung on after introducing internationalization, accepting a string as a parameter

<div class="title-container">
     <h3 class="title">
         {{ $t('') }}
     </h3>
</div>
//---------$t('') What I understand means to go to the current localeloginThe object'stitlevalue

Vue-i18n is introduced

// Internationalization This file is created locally and mainly obtains the current locale and corresponding variable values.import i18n from './lang' 
new Vue({
    el: '#app',   
    i18n,
    render: h => h(App)
})

2. The browser's locale environment is different, and different language configuration files are set accordingly.

// ./lang/ 
import Vue from 'vue' //Introduce vueimport VueI18n from 'vue-i18n'  //Introduce the international plug-in for vueimport Cookies from 'js-cookie' //I need it here, so I introduce a lightweight js processing cookiesimport elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import zhLocale from './zh'     // Locally created Chinese environment configuration fileimport enLocale from './en'     // Locally created English environment configuration file(VueI18n) // Mount through plug-in, use plug-in through global method ()const messages = {
    en: {
        ...enLocale,
        ...elementEnLocale
    },
    zh: {
        ...zhLocale,
        ...elementZhLocale
    }
}
//Get the current locale, return the language or browser locale through the backgroundexport function getLanguage() {
    const chooseLanguage = ('language')//Get the language set by the background    if (chooseLanguage) return chooseLanguage
    //If the background does not have a return language, return language variables according to the browser's locale environment    const language = ( || ).toLowerCase()
    const locales = (messages)//Get all languages ​​set by the front-end    //Transfer through an array of all language values, and return to change the language value if the language set by the front-end matches.    for (const locale of locales) {
        if ((locale) > -1) {
            return locale
        }
    }
    //If none of them match, return to English directly    return 'en'
}
const i18n = new VueI18n({
    //Language ID this.$ realizes language switching by switching the locale value    //For example: this.$='en' is switched directly to English, only to some variables configured in the language    locale: getLanguage(),//The function above is called    messages              //The different configurations corresponding to the language identifier configured above})
export default i18n

3. Create files corresponding to different language identifiers, taking the Chinese environment as an example

// ./lang/ Create a file to store some variables corresponding to the languageexport default {  
    login: {
        title: 'Login Form',
    },
    warning: 'Warning message'
}

Summarize

This is the article about the introduction and usage of vue project configuration internationalization $t(''). For more related contents of vue configuration internationalization $t(''), please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!