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!