Горячая перезагрузка переводов

С помощью функции Webpack для горячей перезагрузки модулей (HMR) (opens new window) можно отслеживать изменения в файлах локализации и осуществлять их горячую перезагрузку в приложении.

Простой пример

Для статичного набора локалей, можно явно указать горячую перезагрузку этих переводов:

import Vue from "vue"
import VueI18n from "vue-i18n"
import en from './en'
import ru from './ru'

const messages = {
  en,
  ru
}

// Экземпляр VueI18n
const i18n = new VueI18n({
  locale: 'en',
  messages
})

// Запускаем приложение
const app = new Vue({
  i18n
  // ...
}).$mount('#app')

// Добавляем горячую перезагрузку сообщений локализации
if (module.hot) {
  module.hot.accept(['./en', './ru'], function() {
    i18n.setLocaleMessage('en', require('./en').default)
    i18n.setLocaleMessage('ru', require('./ru').default)
    // Или добавляем горячую перезагрузку через свойство $i18n
    // app.$i18n.setLocaleMessage('en', require('./en').default)
    // app.$i18n.setLocaleMessage('ru', require('./ru').default)
  })
}

Продвинутый пример

Если требуется поддержка изменяющегося набор переводов, можно реализовать горячую перезагрузку для всех локалей динамически через require.context:

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

// Загрузка всех локалей и сохранение контекста
function loadMessages() {
  const context = require.context("./locales", true, /[a-z0-9-_]+\.json$/i);

  const messages = context
    .keys()
    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))
    .reduce(
      (messages, { key, locale }) => ({
        ...messages,
        [locale]: context(key),
      }),
      {}
    );

  return { context, messages };
}

const { context, messages } = loadMessages();

// Экземпляр VueI18n
const i18n = new VueI18n({
  locale: "en",
  messages,
});

// Запускаем приложение
const app = new Vue({
  i18n,
  // ...
}).$mount('#app');

// Добавляем горячую перезагрузку сообщений локализации
if (module.hot) {
  module.hot.accept(context.id, () => {
    const { messages: newMessages } = loadMessages();

    Object.keys(newMessages)
      .filter((locale) => messages[locale] !== newMessages[locale])
      .forEach((locale) => {
        messages[locale] = newMessages[locale];
        i18n.setLocaleMessage(locale, messages[locale]);
      });
  });
}