Vue i18n перевод для отдельных файловых компонентов

Question

Я использую laravel и в настоящее время пытаюсь сделать многоязычные страницы, поэтому я нашел этот довольно удобный плагин VueI18N для переводов и заставил его работать (каким-то образом), установив его через npm, а затем вставив следующее код в моем приложении. js

//app.js
window.Vue = require('vue');

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

//tons of more components here
Vue.component('vue-test', require('./components/VueTestFileForLocalization.vue').default);

const messages = {
    en: {
        message: {
            hello: 'Hello, {name}!'
        }
    },
    de: {
        message: {
            hello: 'Guten Tag, {name}!'
        }
    }
};

const i18n = new VueI18n({
    locale: 'de',
    messages
});



const app = new Vue({
    el: '#vue-app',
    i18n
});

Затем в моем vue -тесте я попытался успешно вывести это:

 <template>
   <div>{{ $t('message.hello', { name: 'John' }) }}</div>
 </template>
 <script>
 export default {
   data() {
     return {};
   },
   created() {
     this.$i18n.locale = 'en';
   }
 };
 </script>

и, изменив локаль, я также могу отобразить другой язык. Отлично. Теперь я думаю, что с таким количеством компонентов у меня может возникнуть проблема с определением всей локализации внутри приложения. js, и это тоже не красиво. Поэтому я попытался найти Эта ссылка здесь на документы для отдельных файловых компонентов , но, к сожалению, безуспешно. Я скопировал и вставил код (vue -i18n-loader также должен быть установлен по умолчанию laravel) и изменил файл webpack. Ошибка, которую я получаю, кажется довольно распространенной после исследования, но я не могу ее исправить.

Value of key 'hello' is not a string!
Cannot translate the value of keypath 'hello'. Use the value of keypath as default

Он просто выводит тот ключ, который я указал в сообщении.

Есть ли у кого-нибудь из вас идея, что я мог сделать неправильно или забыл настроить? Любые намеки будут оценены очень и очень. Спасибо за ваше время С уважением, Десори

Answer 1

Хотя это и не было прямым ответом на ваш вопрос, я недавно нашел другой подход к той же проблеме, который требует меньших усилий при ведении переводов.

Я поместил все свои переводы в JSON файлы, чтобы я мог делить одни и те же переводы между Laravel backend и Vue front end.

Я сделал это на основании этого: https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n

В соответствии с: https://laravel.com/docs/7.x/localization#using -translation-strings-as-keys

Создание ресурсов / lang / en. json и др c. с содержанием:

{
"my_message": "This is my message in english",
...
}

Я бы создал ресурсы / js / i18n. js, содержащие:

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

function loadLocaleMessages() {
    const locales = require.context(
        "../lang",
        true,
        /[A-Za-z0-9-_,\s]+\.json$/i
    );
    const messages = {};
    locales.keys().forEach(key => {
        const matched = key.match(/([A-Za-z0-9-_]+)\./i);
        if (matched && matched.length > 1) {
            const locale = matched[1];
            messages[locale] = locales(key);
        }
    });
    return messages;
}

export default new VueI18n({
    locale: process.env.VUE_APP_I18N_LOCALE || "en",
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
    messages: loadLocaleMessages()
});

и в приложении. js импортируем, как показано ниже:

//Localise
import i18n from "./i18n";
Vue.use(i18n);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
const app = new Vue({
    i18n,
    el: "#app"
});

Затем вы можете использовать те же переводы в своих шаблонах блейдов с помощником __ и в Vue с $ t (...)

Answer 2

Попробуйте изменения для приложения ниже. js и ваш код должен работать нормально:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './components/VueTestFileForLocalization.vue';

Vue.use(VueI18n);

const messages = {
  en: {
      message: {
          hello: 'Hello, {name}!'
      }
  },
  de: {
      message: {
          hello: 'Guten Tag, {name}!'
      }
  }
};

const i18n = new VueI18n({
  locale: 'de',
  messages
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#vue-app');