Как изменить HTML, отображаемый на стороне сервера, перед рендерингом на стороне клиента на Quasar?
Я новичок в Vue.js. И я хочу использовать Vue I18n. Проблема в том, что когда я устанавливаю локаль на Vue I18n, мне нужно установить атрибут HTML lang на ту же локаль, но я не могу получить доступ к document в режиме SSR. Итак, как я могу изменить HTML, отображаемый на стороне сервера, перед рендерингом на стороне клиента?
if (process.env.CLIENT) // This does not seem good hydration.
document.querySelector('html').setAttribute('lang', i18n.global.locale.value)
Я пытался решить проблему с помощью плагина Meta, но атрибут lang — «en-US».
useMeta(() => ({
htmlAttr: {
lang: i18n.global.locale.value
}
}))
Я не хочу использовать языковой пакет Quasar, потому что он ограничивает мои локали и не позволяет мне использовать некоторые коды регионов.
Итак, я решил установить в конфигурации Quasar Lang атрибуты html без атрибутов true:
// quasar.config.js
framework: {
config: {
lang: {
noHtmlAttrs: true // add this
}
},
Несмотря на это, атрибут lang исчезает из тега HTML.
Я попробовал, но это не работает. @EstusFlask
Рассмотрите возможность обновления вопроса с помощью вашей попытки.
Я только что добавил это. @EstusFlask
Это может сработать. Неизвестно, что такое i18n.global.locale.value на стороне сервера.
Ни локаль по умолчанию, ни параметр локали из маршрута не должны быть неизвестны на стороне сервера. @EstusFlask
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я заставил его работать, создав эти функции:
const qLangPacks = import.meta.glob(
'../../node_modules/quasar/lang/(en-GB|es).js'
)
const qLocaleLangPacks = Object.entries(qLangPacks).map(([path, load]) => ({
locale: path.slice(31, -3),
load,
path
}))
export async function qLoadLang(locale) {
const [langLocale] = locale.split('-')
const langPack = await qLocaleLangPacks
.find((pack) => pack.locale === locale || pack.locale === langLocale)
.load()
return { ...langPack, isoName: locale }
}
Затем просто вызовите функцию следующим образом:
import { Lang } from 'Quasar'
(async () =>
Lang.set(await qLoadLang(i18n.global.locale.value))
)()
Установите эту конфигурацию:
// quasar.config.js
framework: {
config: {},
См. quasar.dev/quasar-plugins/meta