Learn Nuxt with a Collection of 100+ Tips!
Развернуть

Cloudflare

Разверните ваше приложение Nuxt на Cloudflare инфраструктуре.

Страницы Cloudflare

Нулевая конфигурация ✨
Интеграция с Cloudflare Pages возможна с нулевой настройкой, узнать больше.
Checkout the @nuxthub/core module to build full-stack Nuxt applications with Cloudflare, learn more on hub.nuxt.com.

Интеграция с Git

Если вы используете интеграцию GitHub/GitLab с Cloudflare Pages, настройка не требуется. При отправке в ваш репозиторий проект будет автоматически собран и развернут.

Nuxt определит окружающую среду, чтобы установить правильную предустановку Server/Nitro.

Чтобы использовать серверный рендеринг на уровне сети, установите команду сборки на: nuxt build.

Чтобы статически сгенерировать ваш сайт, задайте команду сборки: nuxt generate.

Сопоставление маршрутов

Если на CloudFlare Pages будет найден HTML-файл, путь к которому совпадает с текущим запрошенным маршрутом, он будет использовать его. Он также перенаправит HTML-страницы на их аналоги без расширения: например, /contact.html будет перенаправлен на /contact, а /about/index.html будет перенаправлен на /about/.

Чтобы соответствовать правилам Cloudflare согласования маршрутов, установите для параметра nitro autoSubfolderIndex значение false.

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    }
  }
})

Прямая загрузка

В качестве альтернативы вы можете использовать wrangler для загрузки проекта на Cloudflare.

В этом случае вам придется задать предварительную настройку вручную.

  1. Создайте проект для Cloudflare Pages:
    Terminal
    npx nuxi build --preset=cloudflare_pages
    
  2. Разверните, и он попросит вас создать проект в первый раз:
    Terminal
    wrangler pages deploy dist/
    

Отключите автоминификацию

Убедитесь, что отключили минификацию HTML, CSS и JavaScript в CloudFlare -> Speed -> Optimization -> Auto Minify, чтобы избежать гидратации Vue.

Отключить автоматическую минификацию Cloudflare

Узнать больше

Ознакомьтесь с документацией Nitro, чтобы узнать больше о предварительной настройке развертывания Cloudflare.
Ознакомьтесь с документацией CloudFlare Pages, чтобы узнать об этом подробнее.

Templates

Atidone

Приложение todos с аутентификацией пользователей, SSR и Cloudflare D1.

Atinotes

Редактируемый сайт с универсальным рендерингом на базе Cloudflare KV.

Atidraw

Web application that lets you to draw and share your drawings with the world, with Cloudflare R2 & AI.

Nuxt Image Gallery

An image gallery to upload, edit and share your images to the world, with Cloudflare R2.

Узнать больше

Ознакомьтесь с документацией Nitro, чтобы узнать больше о предварительной настройке развертывания cloudflare.