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

← Cloudflare Workers / workers / framework-guides / web-apps

Vue

В этом руководстве вы создадите новый Vue ↗ приложение и разверните его в Cloudflare Workers (с новым Ресурсы Workers).

1. Настройте новый проект

Используйте create-cloudflare ↗ CLI (C3) для настройки нового проекта. C3 создаст каталог нового проекта, использует код из официального шаблона Vue и предложит возможность мгновенного развертывания.

Чтобы использовать create-cloudflare чтобы создать новый проект Vue с Workers Assets, выполните следующую команду:

npm create cloudflare@latest -- my-vue-app --framework=vue

Как устроен этот проект?

Ниже приведено упрощённое дерево файлов проекта.

  • my-vue-app
    • src/
      • App.vue
    • server/
      • index.ts
    • index.html
    • vite.config.ts
    • wrangler.jsonc

wrangler.jsonc это ваш конфигурационный файл Wrangler. В этом файле:

vite.config.ts настроен на использование Cloudflare Vite plugin. Это запускает ваш Worker в среде выполнения Cloudflare Workers, благодаря чему локальная среда разработки максимально приближена к продакшену.

server/index.ts это ваш серверный API, который содержит один эндпоинт, /api/, который возвращает текстовый ответ. В src/App.vue, ваше приложение Vue обращается к этой конечной точке, чтобы получить сообщение в ответ и отобразить его.

2. Локальная разработка с Cloudflare Vite plugin

После создания проекта выполните следующую команду в каталоге проекта, чтобы запустить локальный сервер. Это позволит просматривать проект локально в процессе разработки.

npm run dev

Что происходит при локальной разработке?

Этот проект использует Vite для локальной разработки и сборки, поэтому в нём доступны все возможности Vite, включая горячую замену модулей (HMR). Кроме того, vite.config.ts настроен на использование Cloudflare Vite plugin. Это запускает ваше приложение в среде выполнения Cloudflare Workers точно так же, как в продакшене, и обеспечивает доступ к локальным эмуляциям биндингов.

3. Развёртывание вашего проекта

Ваш проект можно развернуть в *.workers.dev поддомен или Custom Domain, с собственного компьютера или из любой системы CI/CD, включая Собственная разработка Cloudflare.

Следующая команда собирает и разворачивает ваш проект. Если вы используете CI, не забудьте обновить "deploy command" конфигурацию должным образом.

npm run deploy

Маршрутизация ресурсов

Если вы используете Vue как SPA, вам нужно будет указать not_found_handling = "single_page_application" в конфигурационном файле Wrangler.

По умолчанию Cloudflare сначала пытается сопоставить путь запроса со статическим путём ресурса, определяемым структурой файлов загруженного каталога ресурсов. Это либо каталог, заданный в assets.directory в конфигурации Wrangler или, в случае Cloudflare Vite plugin, каталог вывода клиентской сборки. Если его нет, вызывается Worker, если он присутствует. Если Worker отсутствует, либо Worker использует привязку assets, Cloudflare переключится на поведение, заданное not_found_handling.

См. документация по маршрутизации с дополнительной информацией о том, как работает маршрутизация со статическими ресурсами и как настроить это поведение.

Используйте привязки с Vue

Ваш новый проект также содержит Worker по адресу ./server/index.ts, который можно использовать как backend API для вашего Vue-приложения. Хотя ваше Vue-приложение не может напрямую обращаться к привязкам Workers, оно может взаимодействовать с ними через этот Worker. Вы можете выполнять fetch() запросы из приложения Vue в Worker, который затем сможет обработать запрос и использовать привязки.

Благодаря bindings ваше приложение можно полностью интегрировать с Cloudflare Developer Platform, получив доступ к вычислениям, хранилищу, AI и другим возможностям.

Bindings

Доступ к вычислениям, хранилищу, ИИ и другим возможностям.