Как локализовать компонент SFC Vue.js в проекте Laravel

Когда я локализую в компоненте SFC vue

{{ $t('foo') }}

Затем я получил эту ошибку в консоли, как я могу вызвать функцию $t

Свойство или метод $ t не определены в экземпляре, но используются во время рендеринга. Убедитесь, что это свойство является реактивным либо в параметре данных, либо для компонентов на основе классов, инициализировав свойство.


localization vue.js laravel vue-i18n laravel-mix
person Cui Mingda    schedule 28.08.2020    source источник
comment
пожалуйста, взгляните на это stackoverflow.com/questions/49775725/   -  person Kamlesh Paul    schedule 28.08.2020

Ответы (1)


arrow_upward
0
arrow_downward

Сначала добавьте пакеты, необходимые для локализации

yarn add vue-i18n @kazupon/vue-i18n-loader

затем добавьте следующую конфигурацию в webpack.mix.js, убедитесь, что i18n() должен быть перед js()

mix.extend( 'i18n', new class {
    webpackRules() {
        return [
            {
                resourceQuery: /blockType=i18n/,
                type:          'javascript/auto',
                loader:        '@kazupon/vue-i18n-loader',
            },
        ];
    }
}(),
);

mix.i18n()
    .js('resources/js/app.js', 'public/js')

Добавляем resources/js/utils/i18n.js, будем читать конфиг из директории locale

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('../locales', 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()
})

создайте каталог locales и создайте файл resources/js/locales/en.json, просто добавьте следующий контент

{
    "foo": "bar",
}

теперь давайте импортируем пакет i18n в resources/js/app.js

import router from '@/router'
import i18n from '@/utils/i18n'

const el = "#app"
const app = new Vue({ i18n, router, el });

наконец, вы можете использовать строку локализации в файле компонента Vue

{{ $t('foo') }}

Вы можете определить правила i18n в файле vue

<template>
  <button>{{ $t('Save') }}
</template>
<i18n>
{
  "en": {
    "Save": "Save Now"
  }
}
</i18n>
person Cui Mingda    schedule 28.08.2020