Распространенные ошибки

Около 3 мин

`useXXX() is called without provider`

Такие ошибки обычно возникают из-за неправильного включения в проект нескольких версий @vue/xxx, @vuepress/xxx, vue или vue-router.

Убедитесь, что вы используете последние версии vuepress и vuepress-theme-hope:

pnpm

pnpm add vuepress@next vuepress-theme-hope vue -E

yarn

yarn add vuepress@next vuepress-theme-hope -E

npm

npm i vuepress@next vuepress-theme-hope -E

Кроме того, обновите зависимости, чтобы ваш проект содержал только одну версию соответствующего пакета:

pnpm

pnpm dlx vp-update

yarn

yarn dlx vp-update

npm

npx vp-update

Примечание

Любые официальные пакеты, начинающиеся с @vuepress/, должны быть обновлены до той же версии, что и VuePress.

То есть: если вы используете @vuepress/plugin-search и vuepress/utils, вы должны убедиться, что они имеют тот же номер версии, что и vuepress.

Кроме того, если вы используете другой сторонний плагин, убедитесь, что он совместим с версией VuePress, до которой вы переходите.

`[Vue warn]: Failed to resolve component: XXX`

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

Существуют такие теги, как <center> или <font>, которые есть в спецификации HTML1.0, но помечены как нерекомендуемые с тех пор, как HTML4.0 был выпущен в 1999 году, а затем удален в выпуске HTML5 в 2008 году. Так что Vue не позволяет вам использовать их по умолчанию. Вероятно, вам следует удалить их и использовать стандартный тег HTML5.

Чтобы удалить их, запустите тему с флагом --debug, и вы получите журналы предупреждений, сообщающие вам о тегах, которые, вероятно, не распознаются.

Чтобы использовать их в любом случае, проверьте здесьopen in new window, чтобы найти обходной путь.

`Hydration completed but contains mismatches.`

Эта ошибка указывает на несоответствие SSR, и это не должно быть проблемой с темой.

Сначала проверьте, используете ли вы сервисы, связанные с CloudFlare, и если да, обязательно отключите статическое сжатие ресурсов. Посетите dash.cloudflare.comopen in new window, перейдите в раздел Веб-сайты → YOUR_DOMAIN → Скорость → Оптимизация, отключите JavaScript и HTML в параметрах Auto Minify.

Примечание

Auto Minify в CloudFlare неправильно обрабатывает пробелы HTML и разрывы строк, что может привести к тому, что Vue вызовет несоответствие SSR во время инициализации.

Также вы можете проверить это:

Если вы столкнулись с этой проблемой только на определенных страницах, проверьте, есть ли на странице дополнительные компоненты, которые вы добавили.
Если это так, эти компоненты, вероятно, будут иметь разные результаты рендеринга между SSR^[1] и CSR^[2]. Вы можете попытаться сделать их поведение согласованным или обернуть свои компоненты компонентом <ClientOnly />, предоставляемым vuepress/client.

Если у вас есть эта проблема на всех страницах, выполните предыдущий шаг, чтобы проверить компоненты, которые вы добавили в макет, или глобальные компоненты.

`FATAL ERROR: XXX - JavaScript heap out of memory`

Это означает, что параметр max_old_space_size в Node.js слишком мал для создания этого приложения. Вы можете попытаться увеличить max_old_space_size, установив переменную среды NODE_OPTIONS.

max_old_space_size измеряется в мегабайтах, по умолчанию это половина памяти вашей машины.

Это значение может быть больше фактического объема памяти вашего компьютера.

Для небольших проектов обычно требуется не более 2 ГБ (2048 МБ).
Для больших проектов обычно требуется не более 4 ГБ (4048 МБ)
Если вы включаете функцию блога вместе с множеством функций улучшения уценки на больших сайтах, обычно это не займет больше 8 ГБ (8192 МБ).

Пути повышения

В GitHub workflow установите env в файле рабочего процесса.

  - name: Build project
+   env:
+     NODE_OPTIONS: --max_old_space_size=8192
    run: pnpm run build

В Windows вы можете следовать этому руководствуopen in new window.

`xxx isn’t assign with a lang, and will return 'en-US' instead.`

Если вы видите, что xxx isn’t assign with a lang, and will return 'en-US' instead. во время запуска процесса разработки проверьте, установили ли вы язык для каждого языка.

Даже если у вас только один язык, вам все равно нужно установить язык.

Использование конфигурации боковой панели формата объекта означает, что вы хотите установить другую боковую панель на основе маршрутов.

Если вы хотите избежать этого предупреждения, вам нужно добавить конфигурацию боковой панели для пути rootLocale, так как все страницы будут использовать этот путь.
Если вы хотите отключить боковую панель в текущем маршруте, установите sidebar: false в frontmatter.
Если вы хотите отключить боковую панель в текущей папке, добавьте [currentFolderRoute]: false в конфигурацию боковой панели.
Если вы хотите сообщить теме, что вам нужна боковая панель только в установленных вами маршрутах, добавьте [rootLocalePath]: false в конфигурацию боковой панели, чтобы указать, что конфигурация боковой панели темы отключена по умолчанию.

HotReload не работает в DevServer

Некоторые конфигурации сильно влияют на производительность сервера разработки, поэтому их горячая перезагрузка по умолчанию отключена. Вы можете включить его вручную через hotReload: true в настройках темы.

К ним относятся категории и теги для блога, структурированная боковая панель и информация на основе git.

Некоторые настройки страницы недействительны

Вы можете сначала просмотреть документацию, чтобы узнать, не поддерживает ли параметр конфигурацию страницы.

Поддержка конфигурации страницы означает, что тема позволяет конфигурации страницы переопределять глобальную конфигурацию с тем же именем (та же функция), но не все функции соответствуют этому параметру.

Совет

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

SSR: Server Side Rendering ↩︎
CSR: Client Side Rendering ↩︎