Vue.js: петля на теге <i18n>


Vue.js: петля на теге &lt;i18n&gt;

14.10.2020 09:33:16 Просмотров 3 Источник

Я использую Nuxt.js в статическом режиме для создания моего веб-сайта и недавно добавленного модуля i18n (nuxt-i18n) для поддержки многоязычности. Теперь я хочу определить переводы с помощью пользовательских блоков в моих файлах .vue, потому что они относятся к конкретным страницам переводов:

<i18n src="./en.json"></i18n>

Проблема в том, что когда у меня есть 10+ языков, это быстро раздражает. Мой вопрос, есть ли в любом случае генерировать эти теги в цикле, например v-for цикл над переменной $i18.locales?

Документация: nuxt-i18, vue-i18n-загрузчик

У вопроса есть решение - Посмотреть?

Ответы - Vue.js: петля на теге &lt;i18n&gt; / Vue.js: loop on <i18n> tag

Является ответом!
Michal Levý

14.10.2020 05:01:18

Есть способ, но определенно не использовать v-for, так как это конструкция Vue, используемая только в шаблонах Vue (блок <template> SFC обрабатывается компилятором шаблонов Vue)

Vue-i18n-loader - это просто расширение vue-loader (используется для обработки файлов vue с помощью Webpack) и работает с использованием пользовательских блоков и функций импорта Src. Таким образом, единственный способ решить эту проблему-изменить процесс сборки Webpack

Ниже приведены два возможных решения. В обоих случаях это добавляет некоторую сложность вашему проекту, поэтому, возможно, лучшим решением было бы просто объединить все переводы в один файл json...

Вариант 1-заменить vue-i18n-loader на пользовательское решение

Webpack поддерживает импорт файлов json по умолчанию (они импортируются как объекты JS)

Вы можете использовать Webpack require.context(), как указано здесь. Обратите внимание, что вы можете поместить функцию loadMessages() в отдельный файл и импортировать ее в свои компоненты, но вы должны передать контекст в качестве параметра, потому что параметры require.context должны быть литералами

...в блоке сценария компонента / страницы

<template>0

Аналогичное решение можно создать с помощью webpack-import-glob-loader, но для этого необходимо изменить конфигурацию Webpacks и объединить импортированные "модули" (JS-объекты) в один объект <template>1...

Вариант 2-написание пользовательского загрузчика Webpack

Не должно быть слишком сложно написать свой собственный загрузчик, который расширил бы что-то вроде этого <template>2 на несколько разделов <template>3. Также потребуется изменить конфигурацию Webpack. И ваш загрузчик должен работать до vue-loader...

Помочь в развитии проекта:
Закрыть X