How to use:
When used with Element-UI, there will be two problems: #### (1) After the page is refreshed, the language switched through the button is restored to the original language and cannot be saved. #### (2) The prompt text inside the frame cannot be changed, such as the prompt text inside the time selection box
Regarding the first question, you can assign values to the locale object through localStorage when initializing the VueI18n instance.
When switching languages, different language options can be cached and saved for a long time, and the locale attribute value will not be changed because of refreshing the web page
const i18n = new VueI18n({ locale: ('locale') || 'zh', messages })
Regarding the second question, changing the internal language of the Element component, manual processing is also involved.vue-i18n@Compatibility issues./#/... The official website has already introduced in detail, here we will follow the implementation
### import Vue from 'vue' import VueI18n from 'vue-i18n' import locale from 'element-ui/lib/locale'; import zh from './langs/zh' import en from './langs/en' import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
(VueI18n)
const messages = { en: (en, enLocale), zh: (zh, zhLocale) }
()
const i18n = new VueI18n({ locale: ('locale') || 'zh', messages })
locale.i18n((key, value) => (key, value)) //In order to realize multi-language switching of element plug-inexport default i18n
Integrate all internationalization documents together as above to avoid introducing relevant code in medium and large sections. There are only two lines of code left in i18n
### import i18n from './i18n/i18n' // 1 line = new Vue({ el: '#app', router, store, i18n, // 2OK components: { App }, template: '' })
--------------------------------------------------------------------------------------------------------------------------------
// Local project internationalizationimport locale_zh_CN from './lang/zh-CN'
import locale_zh_TW from './lang/zh-TW'
import locale_en_US from './lang/en-US'
import locale_ko_KR from './lang/ko-KR'
// ElementUI Internationalizationimport element_locale from 'element-ui/lib/locale'
import element_zh_CN from 'element-ui/lib/locale/lang/zh-CN'
import element_zh_TW from 'element-ui/lib/locale/lang/zh-TW'
import element_en_US from 'element-ui/lib/locale/lang/en'
import element_ko_KR from 'element-ui/lib/locale/lang/ko'
import Vue from 'vue'
import VueI18n from 'vue-i18n'
(VueI18n)
// Merge and throw each international file (international files of plug-ins such as public components also need to be considered)const messages = {
zh_CN: (locale_zh_CN, element_zh_CN),
zh_TW: (locale_zh_TW, element_zh_TW),
en_US: (locale_en_US, element_en_US),
ko_KR: (locale_ko_KR, element_ko_KR)
}
// i18n plug-in is given to Chinese by defaultconst i18n = new VueI18n({
locale: ('WEBFRONT_LANG') || 'zh_CN',
messages
})
// In order to realize multi-language switching of element plug-inelement_locale.i18n((key, value) => (key, value))
export default i18n
Summarize
The above is the configuration method of vue-i18n combined with Element-ui introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!