Реализация интернационализации vue2.0 vue-i18n6.x

внешний интерфейс Командная строка JavaScript Vue.js
Реализация интернационализации vue2.0 vue-i18n6.x

Одностраничная система управления, созданная с помощью vue-cli и использующая elementUI в качестве внешнего интерфейса. Для достижения многоязычности был протестирован процесс реализации функции vue-i18n.Карточка группы теща.GitHub.IO/v UE-i18you/en…

1. Установка

npm install --save vue-i18n

2. Ссылка - для удобства более поздней оптимизации, создайте отдельный файл i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// Ready translated locale messages
const messages = {
  zh: {
    message: {
      hello: '嗨，世界',
    }
  },
  en: {
    message: {
      hello: 'hello world',
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}
export default new VueI18n({
  locale: 'ja', // set locale
  messages, // set locale messages
})

3. Позвонить — представить в main.js

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

4. Реализация в файле vue

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

Выход: こんにちは, мир

На данный момент интернационализация имеет простую реализацию. Версия приведенного выше кода vue-i18n — 6.x.

Тем не менее, всегда есть но, когда я хочу реализовать раскрывающийся список для переключения выбора языка, я обнаруживаю, что многие страницы сообщают об ошибках.Оказывается, версия vue-i18n — 6.x, которая конфликтует с elementUI. Подробности можно посмотретьэлемент. Вы голодны? IO/#/this-cn/com…

Так как elementUI уже реализовал фреймворк всего проекта, заменить его другими UI невозможно, а новый метод написания можно корректировать только в соответствии с документом, следующим образом:

main.js 

import VueI18n from 'vue-i18n'
import ElementLocale from 'element-ui/lib/locale'
import messages from './duoyu/' //多语言文字
Vue.use(VueI18n);
//设置当前语言默认值--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))//为了实现element插件的多语言切换

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router,
  store
  i18n
}

Код папки duoyu:

index.js 

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

export default {
  en: en,
  zh: zh,
  ja: ja
}

Далее для отображения используется только en.js.enLocale — это многоязычный файл elementUi, который анализируется с помощью ... enLocale и объединяется с 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
}

Примечание:

Вызов многоязычных полей в коде js

this.$t('duoyu.message.hello')

действие переключения языка

localStorage.lang = this.searchkey.lan;
this.$i18n.locale = this.searchkey.lan

Категории