A vuE-CLI single-page management system, using elementUI as a front-end framework. In order to realize multi-language, vuE-I18N is tested. Kazupon. Making. IO/vue i18n/en…

1, install,

npm install --save vue-i18nCopy the code

2. Reference – Create a separate i18n.js file for later optimization

import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) // Ready translated locale messages const messages = {en: {message: {hello: 'hello world',}}, ja: {message: {hello: 'hello world',}}, ja: {message: {hello: 'hello world',}}, ja: {message: {hello: 'Kosher view: Most information in the industry'}}} export default new VueI18n({locale: 'JA ', // set locale messages, // set locale messages})Copy the code

3. Call – in main.js

import i18n from './i18n'
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  i18n
})Copy the code

4, in the VUE file implementation

<p>{{ $t("message.hello") }}</p>Copy the code

The beauty of the world is shared by many people

At this point, internationalization has a simple implementation. Vue – I18N version of the above code is 6.x.

Vue -i18n version 6. X conflicts with elementUI Elem. IO /#/ zh-cn /com…

Since elementUI already implements the framework functionality of the entire project, it is not possible to replace it with another UI, so it can only be written according to the documentation as follows:

main.js 

Import VueI18n from 'vue-i18n' import ElementLocale from 'elemence-ui /lib/locale' import messages from './duoyu/' // multilingual text  Vue.use(VueI18n); // Set the default for the current language --localStorage let langNow; if (localStorage.lang) { langNow = localStorage.lang; } else { localStorage.lang = 'en'; langNow = 'en'; } // Create VueI18n instance with options const i18n = new VueI18n({ locale: langNow, // set locale messages, // set locale messages }); Elementlocale.i18n ((key, value) => i18n.t(key, value)) new Vue({el: '#app', template: '<App/>', components: { App }, router, store i18n }Copy the code

Code for the Duoyu folder:

index.js 

import en from './en'
import zh from './zh'
import ja from './ja'

export default {
  en: en,
  zh: zh,
  ja: ja
}Copy the code

EnLocale is a multilingual elementUi file that is used by… EnLocale parses and merges with our own en.js

import enLocale from 'element-ui/lib/locale/lang/en' export default { languages: [{ text: 'Chinese', val: 'zh' }, { text: 'English', val: 'en' }, { text: 'Japanese', val: 'ja' }], duoyu: { message: { hello: 'hello world', }, }, ... enLocale }Copy the code

Remark:

Call multilingual fields in JS code

this.$t('duoyu.message.hello')Copy the code

Language switching action

localStorage.lang = this.searchkey.lan;
this.$i18n.locale = this.searchkey.lanCopy the code