Производство фотообоев в Новосибирске. Интернет магазин фотообоев. Изготовление - один день! Каталог 10 000 изображений!
22 Март 2023

Nuxt host url undefined — некорректная ссылка. Как работает «Поделиться» в браузере мобильного.

Так и не придумал нормальный заголовок — фиг с ним, пусть так будет… кривой и непонятный, зато я со своей проблемой нашел бы статейку и быстро всё пофиксил.
А так — только зря ковырялся часа 3 в проекте.

Проблемный кейс — захожу на сайт, перехожу по любой ссылке, возвращаюсь нажимаю «поделиться» — в сервис куда поделились «улетает» заголовок и ссылка https://site.ru/undefined/
При прямом заходе по ссылке всё нормально.

Начну с того, что в браузере этот механизм использует информацию из open-graph meta тэгов.
В онлайн режиме повторяем кейс и смотрим DOM —

Попался!

Далее уже специфика конкретного проекта на NUXT

Установка мета тегов
/layouts/default/default.ts

head () {
return {
title: this.seo?.title || TITLE,
meta: [
{ hid: 'keywords', name: 'keywords', content: this.seo?.keywords || '' },
{ hid: 'description', name: 'description', content: this.seo?.description || DESCRIPTION },
{ hid: 'title', name: 'title', content: this.seo?.title || TITLE },
{ hid: 'og:title', property: 'og:title', content: this.seo?.title || TITLE },
{ hid: 'og:description', property: 'og:description', content: this.seo?.description || DESCRIPTION },
{ hid: 'og:url', property: 'og:url', content: ${process.env.PROXY_BASE}${this.$route.fullPath} },
],

Переменная окружения process.env.PROXY_BASE не срабатывала как полагается.
Для того, чтобы всё работало добавляем proxyBase в publicRuntimeConfig

/.configs.nuxt/runtime-config.js

export default {
publicRuntimeConfig: {
proxyBase: process.env.PROXY_BASE,

После чего в шаблоне вместо process.env.PROXY_BASE используем this.$config.proxyBase

Вуаля

рубрики: Nuxt | Комментарии (0)