INTEGRITY Документация

← Cloudflare Pages / pages / framework-guides

Vite 3

Vite ↗ это инструмент сборки нового поколения для фронтенд-разработчиков. С помощью выпуск Vite 3 ↗, разработчики могут воспользоваться новыми улучшениями командной строки (CLI), стартовыми шаблонами и подробнее ↗ для создания клиентских приложений.

Cloudflare Pages нативно поддерживает проекты на Vite 3. Подробнее в статье блога улучшения процесса сборки Pages ↗, включая инициализацию сборки менее чем за секунду, чтобы узнать больше об использовании Vite 3 и Cloudflare Pages для оптимизации инструментов сборки вашего приложения.

В этом руководстве вы узнаете, как начать новый проект с помощью Vite 3 и развернуть его в Cloudflare Pages.

npm create vite@latest
✔ Project name: … vite-on-pages
✔ Select a framework: › vue
✔ Select a variant: › vue

Scaffolding project in ~/src/vite-on-pages...

Done. Now run:

  cd vite-on-pages
  npm install
  npm run dev

Теперь вы создадите новый репозиторий GitHub и отправите в него код с помощью GitHub gh командную строку (CLI) ↗:

git init
Initialized empty Git repository in ~/vite-vue3-on-pages/.git/
git add .
git commit -m "Initial commit"                                           vite-vue3-on-pages/git/main +
[main (root-commit) dad4177] Initial commit
 14 files changed, 1452 insertions(+)
gh repo create
✓ Created repository kristianfreeman/vite-vue3-on-pages on GitHub
✓ Added remote [email protected]:kristianfreeman/vite-vue3-on-pages.git
git push

Чтобы развернуть сайт в Pages:

  1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

    Перейдите в Workers & Pages ↗

  2. Выберите Создать приложение > Pages > Импорт из существующего репозитория Git.

  3. Выберите новый репозиторий GitHub.

  4. В Настройка сборок и деплоев, задайте npm run build в качестве Команда сборки, а также dist в качестве Каталог вывода сборки.

После завершения настройки выберите Save and Deploy.

Вы увидите, как выполняется ваш первый конвейер развёртывания. Pages устанавливает все зависимости и собирает проект согласно заданным настройкам. После развёртывания проект будет доступен по адресу <YOUR_PROJECT_NAME>.pages.dev поддомен. Найдите поддомен вашего проекта в Workers & Pages > выберите свой проект Pages > Развёртывания.

Cloudflare Pages будет автоматически пересобирать ваш проект и разворачивать его при каждом новом отправленном коммите.

Кроме того, у вас будет доступ к развёртывания предпросмотра, которые повторяют процесс сборки и развёртывания для pull request. Благодаря им можно просматривать изменения проекта по реальному URL-адресу до их развёртывания в продакшене.

Подробнее

После выполнения этого руководства вы успешно развернули свой сайт на Vite 3 на Cloudflare Pages. Чтобы начать работу с другими фреймворками, обратитесь к списку руководств по фреймворкам.