From 746b15a82f38a86254aa4cfe47d95323a627867d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=20=E2=80=98TK=E2=80=99=20Taylor?= Date: Wed, 28 Jan 2026 02:27:40 +0000 Subject: [PATCH 1/4] docs(static-deploy): improve Cloudflare documentation to highlight Workers (#21411) Co-authored-by: James Opstad <13586373+jamesopstad@users.noreply.github.com> Co-authored-by: Bjorn Lu --- guide/api-environment.md | 4 +++- guide/static-deploy.md | 50 ++++++++++++++++++++++++---------------- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/guide/api-environment.md b/guide/api-environment.md index cece410e..4755fdf8 100644 --- a/guide/api-environment.md +++ b/guide/api-environment.md @@ -100,6 +100,8 @@ Note that the `ssr` top-level property is going to be deprecated once the Enviro Low level configuration APIs are available so runtime providers can provide environments with proper defaults for their runtimes. These environments can also spawn other processes or threads to run the modules during dev in a closer runtime to the production environment. +For example, the [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/) uses the Environment API to run code in the Cloudflare Workers runtime (`workerd`) during development. + ```js import { customEnvironment } from 'vite-environment-provider' @@ -139,4 +141,4 @@ Plugin authors have a more consistent API available to interact with the current Frameworks could decide to expose environments at different levels. If you're a framework author, continue reading the [Environment API Frameworks Guide](./api-environment-frameworks) to learn about the Environment API programmatic side. -For Runtime providers, the [Environment API Runtimes Guide](./api-environment-runtimes.md) explains how to offer custom environment to be consumed by frameworks and users. +For Runtime providers, the [Environment API Runtimes Guide](./api-environment-runtimes.md) explains how to offer custom environments to be consumed by frameworks and users. diff --git a/guide/static-deploy.md b/guide/static-deploy.md index 12286d0a..96f3aa51 100644 --- a/guide/static-deploy.md +++ b/guide/static-deploy.md @@ -148,42 +148,52 @@ After your project has been imported and deployed, all subsequent pushes to bran Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/git). -## Cloudflare Pages +## Cloudflare -### Cloudflare Pages via Wrangler +### Cloudflare Workers -1. Install [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/). -2. Authenticate Wrangler with your Cloudflare account using `wrangler login`. -3. Run your build command. -4. Deploy using `npx wrangler pages deploy dist`. +The [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/) provides integration with Cloudflare Workers and uses Vite's Environment API to run your server-side code in the Cloudflare Workers runtime during development. + +To add Cloudflare Workers to an existing Vite project, install the plugin and add it to your config: ```bash -# Install Wrangler CLI -$ npm install -g wrangler +$ npm install --save-dev @cloudflare/vite-plugin +``` -# Login to Cloudflare account from CLI -$ wrangler login +```js [vite.config.js] +import { defineConfig } from 'vite' +import { cloudflare } from '@cloudflare/vite-plugin' -# Run your build command -$ npm run build +export default defineConfig({ + plugins: [cloudflare()], +}) +``` -# Create new deployment -$ npx wrangler pages deploy dist +```jsonc [wrangler.jsonc] +{ + "name": "my-vite-app", +} ``` -After your assets are uploaded, Wrangler will give you a preview URL to inspect your site. When you log into the Cloudflare Pages dashboard, you will see your new project. +After running `npm run build`, your application can now be deployed with `npx wrangler deploy`. + +You can also easily add backend APIs to your Vite application to securely communicate with Cloudflare resources. This runs in the Workers runtime during development and deploys alongside your frontend. See the [Cloudflare Vite plugin tutorial](https://developers.cloudflare.com/workers/vite-plugin/tutorial/) for a complete walkthrough. + +### Cloudflare Pages + +#### Cloudflare Pages with Git -### Cloudflare Pages with Git +Cloudflare Pages gives you a way to deploy directly to Cloudflare without having to manage a Wrangler file. 1. Push your code to your git repository (GitHub, GitLab). -2. Log in to the Cloudflare dashboard and select your account in **Account Home** > **Pages**. -3. Select **Create a new Project** and the **Connect Git** option. +2. Log in to the Cloudflare dashboard and select your account in **Account Home** > **Workers & Pages**. +3. Select **Create a new Project** and the **Pages** option, then select Git. 4. Select the git project you want to deploy and click **Begin setup** -5. Select the corresponding framework preset in the build setting depending on the Vite framework you have selected. +5. Select the corresponding framework preset in the build setting depending on the Vite framework you have selected. Otherwise enter your build commands for your project and your expected output directory. 6. Then save and deploy! 7. Your application is deployed! (e.g `https://.pages.dev/`) -After your project has been imported and deployed, all subsequent pushes to branches will generate [Preview Deployments](https://developers.cloudflare.com/pages/platform/preview-deployments/) unless specified not to in your [branch build controls](https://developers.cloudflare.com/pages/platform/branch-build-controls/). All changes to the Production Branch (commonly “main”) will result in a Production Deployment. +After your project has been imported and deployed, all subsequent pushes to branches will generate [Preview Deployments](https://developers.cloudflare.com/pages/platform/preview-deployments/) unless specified not to in your [branch build controls](https://developers.cloudflare.com/pages/platform/branch-build-controls/). All changes to the Production Branch (commonly "main") will result in a Production Deployment. You can also add custom domains and handle custom build settings on Pages. Learn more about [Cloudflare Pages Git Integration](https://developers.cloudflare.com/pages/get-started/#manage-your-site). From eeb6b351d7a8841d850dd1bb56dcf6635c9ed6ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0?= Date: Wed, 28 Jan 2026 12:43:14 +0900 Subject: [PATCH 2/4] docs: bulk of typo fixes (#21507) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 루밀LuMir Co-authored-by: msmx-mnakagawa Co-authored-by: Brandon Zylstra <9854+brandonzylstra@users.noreply.github.com> Co-authored-by: Tilak Mahajan <121009772+Tilakmahajan@users.noreply.github.com> --- .vitepress/theme/landing/FeatureGrid1.vue | 4 ++-- config/shared-options.md | 2 +- guide/build.md | 2 +- guide/features.md | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.vitepress/theme/landing/FeatureGrid1.vue b/.vitepress/theme/landing/FeatureGrid1.vue index 11959f7b..a85e7506 100644 --- a/.vitepress/theme/landing/FeatureGrid1.vue +++ b/.vitepress/theme/landing/FeatureGrid1.vue @@ -60,8 +60,8 @@ import viteAnimation from '@assets/vite/animations/563_x_420_rich_features.riv'
Rich Features Out of the Box

- TypeScript, JSX, CSS, Workers, Web Assembly... and more with just a - plugin away. + TypeScript, JSX, CSS, Workers, WebAssembly... and more just a plugin + away.

Date: Thu, 29 Jan 2026 12:23:17 +0800 Subject: [PATCH 3/4] docs(cn): resolve conflicts --- .vitepress/theme/landing/FeatureGrid1.vue | 7 +------ config/shared-options.md | 6 +----- guide/api-environment.md | 6 +----- guide/build.md | 6 +----- guide/features.md | 4 ---- 5 files changed, 4 insertions(+), 25 deletions(-) diff --git a/.vitepress/theme/landing/FeatureGrid1.vue b/.vitepress/theme/landing/FeatureGrid1.vue index 8e6547ca..35b7fb88 100644 --- a/.vitepress/theme/landing/FeatureGrid1.vue +++ b/.vitepress/theme/landing/FeatureGrid1.vue @@ -59,12 +59,7 @@ import viteAnimation from '@assets/vite/animations/563_x_420_rich_features.riv'
丰富的开箱即用功能

-<<<<<<< HEAD - TypeScript, JSX, CSS, Workers, Web Assembly... 只需一个插件即可使用 -======= - TypeScript, JSX, CSS, Workers, WebAssembly... and more just a plugin - away. ->>>>>>> eeb6b351d7a8841d850dd1bb56dcf6635c9ed6ee + TypeScript, JSX, CSS, Workers, WebAssembly... 只需一个插件即可使用

>>>>>> eeb6b351d7a8841d850dd1bb56dcf6635c9ed6ee +存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件，使用缓存可以提高性能。如需重新生成缓存文件，你可以使用 `--force` 命令行选项或手动删除目录。此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。当没有检测到 `package.json` 时，则默认为 `.vite`。 ## resolve.alias {#resolve-alias} diff --git a/guide/api-environment.md b/guide/api-environment.md index bf99d196..dad6441a 100644 --- a/guide/api-environment.md +++ b/guide/api-environment.md @@ -100,7 +100,7 @@ interface UserConfig extends EnvironmentOptions { 底层 API 配置已可用，因此可以支持为运行时提供环境。这些环境还可以生成其他进程或线程，以便在更接近生产环境的运行时间内运行开发模块。 -For example, the [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/) uses the Environment API to run code in the Cloudflare Workers runtime (`workerd`) during development. +例如，[Cloudflare Vite 插件](https://developers.cloudflare.com/workers/vite-plugin/) 使用环境 API 在开发过程中在 Cloudflare Workers 运行时 (`workerd`) 中运行代码。 ```js import { customEnvironment } from 'vite-environment-provider' @@ -141,8 +141,4 @@ export default { 框架可以自行决定在不同层次上暴露环境。如果你是框架作者，请继续阅读 [环境 API 框架指南](./api-environment-frameworks.md)，以了解环境 API 编程方面的内容。 -<<<<<<< HEAD 对于运行时提供者，[环境 API 运行时指南](./api-environment-runtimes.md) 解释了如何提供自定义环境供框架和用户使用。 -======= -For Runtime providers, the [Environment API Runtimes Guide](./api-environment-runtimes.md) explains how to offer custom environments to be consumed by frameworks and users. ->>>>>>> eeb6b351d7a8841d850dd1bb56dcf6635c9ed6ee diff --git a/guide/build.md b/guide/build.md index a8035c1a..5d8197d2 100644 --- a/guide/build.md +++ b/guide/build.md @@ -135,11 +135,7 @@ export default defineConfig({ }) ``` -<<<<<<< HEAD -如果你指定了另一个根目录，请记住，在解析输入路径时，`__dirname` 的值将仍然是 vite.config.js 文件所在的目录。因此，你需要把对应入口文件的 `root` 的路径添加到 `resolve` 的参数中。 -======= -If you specify a different root, remember that `__dirname` will still be the folder of your `vite.config.js` file when resolving the input paths. Therefore, you will need to add your `root` entry to the arguments for `resolve`. ->>>>>>> eeb6b351d7a8841d850dd1bb56dcf6635c9ed6ee +如果你指定了另一个根目录，请记住，在解析输入路径时，`__dirname` 的值将仍然是 `vite.config.js` 文件所在的目录。因此，你需要把对应入口文件的 `root` 的路径添加到 `resolve` 的参数中。 请注意，在 HTML 文件中，Vite 忽略了 `rolldownOptions.input` 对象中给定的入口名称，而是在生成 dist 文件夹中的 HTML 资源文件时，使用了文件已解析的路径 ID。这确保了与开发服务器的工作方式保持一致的结构。 diff --git a/guide/features.md b/guide/features.md index 60006747..97b7df38 100644 --- a/guide/features.md +++ b/guide/features.md @@ -10,11 +10,7 @@ import { someMethod } from 'my-dep' ``` -<<<<<<< HEAD 上面的代码会在浏览器中抛出一个错误。Vite 将会检测到所有被加载的源文件中的此类裸模块导入，并执行以下操作: -======= -The above import will throw an error in the browser. Vite will detect such bare module imports in all served source files and perform the following: ->>>>>>> eeb6b351d7a8841d850dd1bb56dcf6635c9ed6ee 1. [预构建](./dep-pre-bundling) 它们可以提高页面加载速度，并将 CommonJS / UMD 转换为 ESM 格式。预构建这一步由 [esbuild](https://esbuild.github.io/) 执行，这使得 Vite 的冷启动时间比任何基于 JavaScript 的打包器都要快得多。 From 05b02d052b9dfff94a983e7b74e5b185e8259f7d Mon Sep 17 00:00:00 2001 From: waynzh Date: Thu, 29 Jan 2026 12:31:16 +0800 Subject: [PATCH 4/4] docs(cn): resolve conflicts --- guide/static-deploy.md | 73 ++++++++++-------------------------------- 1 file changed, 17 insertions(+), 56 deletions(-) diff --git a/guide/static-deploy.md b/guide/static-deploy.md index f2cc1093..5e3c92d1 100644 --- a/guide/static-deploy.md +++ b/guide/static-deploy.md @@ -148,51 +148,13 @@ Netlify 命令行工具（CLI）会为你提供一个预览链接，供你查看 查看 Vercel 的 [Git 集成](https://vercel.com/docs/concepts/git) 了解更多细节。 -<<<<<<< HEAD -## Cloudflare Pages {#cloudflare-pages} +## Cloudflare {#cloudflare} -### Cloudflare Pages via Wrangler {#cloudflare-pages-via-wrangler} +### Cloudflare Workers {#cloudflare-workers} -1. 安装 [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/). -2. 使用 `wrangler login`、通过你的 Cloudflare 账号完成 Wrangler 身份校验。 -3. 运行你的构建命令 -4. 使用 `npx wrangler pages deploy dist` 部署。 +[Cloudflare Vite 插件](https://developers.cloudflare.com/workers/vite-plugin/) 集成了 Cloudflare Workers，通过 Vite 的 Environment API，让你的服务端代码在开发时运行于 Cloudflare Workers 运行时环境中。 -```bash -# 安装 Wrangler CLI -$ npm install -g wrangler - -# 使用 CLI 工具登录 Cloudflare 账号 -$ wrangler login - -# 运行构建命令 -$ npm run build - -# 创建一个新的部署 -$ npx wrangler pages deploy dist -``` - -在你的资产上传后，Wrangler 会给你一个预览 URL 来检查你的网站。当你登录到 Cloudflare Pages 仪表板时，你会看到你的新项目。 - -### Cloudflare Pages with Git {#cloudflare-pages-with-git} - -1. 将你的代码推送到你的 Git 仓库（GitHub, GitLab） -2. 登录 Cloudflare 控制台，在 **Account Home** > **Pages** 下选择你的账号 -3. 选择 **Create a new Project** 以及 **Connect Git** 选项 -4. 选择你想要部署的 Git 项目，然后点击 **Begin setup** -5. 根据你所选择的 Vite 框架，在构建设置中选择相应的框架预设 -6. 记得保存！然后部署吧！ -7. 然后你的应用就部署完成了！（例如： `https://.pages.dev/`） - -在你的项目被导入和部署后，所有对该分支的后续推送都会生成一个 [预览部署](https://developers.cloudflare.com/pages/platform/preview-deployments/)，除非你特意在 [控制分支构建](https://developers.cloudflare.com/pages/platform/branch-build-controls/) 的选项中写明不触发。所有对 **生产分支**（通常是 "main"）的更改都会生成一个 **生产构建**。 -======= -## Cloudflare - -### Cloudflare Workers - -The [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/) provides integration with Cloudflare Workers and uses Vite's Environment API to run your server-side code in the Cloudflare Workers runtime during development. - -To add Cloudflare Workers to an existing Vite project, install the plugin and add it to your config: +要在现有 Vite 项目中添加 Cloudflare Workers，请安装插件并将其添加到配置中： ```bash $ npm install --save-dev @cloudflare/vite-plugin @@ -213,26 +175,25 @@ export default defineConfig({ } ``` -After running `npm run build`, your application can now be deployed with `npx wrangler deploy`. +运行 `npm run build` 后，你的应用就可以通过 `npx wrangler deploy` 进行部署。 -You can also easily add backend APIs to your Vite application to securely communicate with Cloudflare resources. This runs in the Workers runtime during development and deploys alongside your frontend. See the [Cloudflare Vite plugin tutorial](https://developers.cloudflare.com/workers/vite-plugin/tutorial/) for a complete walkthrough. +你还可以轻松地为 Vite 应用添加后端 API，用于与 Cloudflare 资源进行安全通信。开发时，这些 API 运行在 Workers 运行时环境中，部署时会随前端代码一同发布。详细步骤请查看 [Cloudflare Vite 插件教程](https://developers.cloudflare.com/workers/vite-plugin/tutorial/)。 -### Cloudflare Pages +### Cloudflare Pages {#cloudflare-pages} -#### Cloudflare Pages with Git +#### Cloudflare Pages 与 Git {#cloudflare-pages-with-git} -Cloudflare Pages gives you a way to deploy directly to Cloudflare without having to manage a Wrangler file. +Cloudflare Pages 提供了一种直接部署到 Cloudflare 的方式，而无需管理 Wrangler 文件。 -1. Push your code to your git repository (GitHub, GitLab). -2. Log in to the Cloudflare dashboard and select your account in **Account Home** > **Workers & Pages**. -3. Select **Create a new Project** and the **Pages** option, then select Git. -4. Select the git project you want to deploy and click **Begin setup** -5. Select the corresponding framework preset in the build setting depending on the Vite framework you have selected. Otherwise enter your build commands for your project and your expected output directory. -6. Then save and deploy! -7. Your application is deployed! (e.g `https://.pages.dev/`) +1. 将你的代码推送到你的 Git 仓库（GitHub, GitLab）。 +2. 登录 Cloudflare 控制台，在 **Account Home** > **Workers & Pages** 下选择你的账号。 +3. 选择 **Create a new Project** 和 **Pages** 选项，然后选择 Git。 +4. 选择你想要部署的 Git 项目，然后点击 **Begin setup**。 +5. 根据你所选择的 Vite 框架，在构建设置中选择相应的框架预设。否则为你的项目输入构建命令和预期的输出目录。 +6. 然后保存并部署！ +7. 你的应用就部署完成了！（例如：`https://.pages.dev/`） -After your project has been imported and deployed, all subsequent pushes to branches will generate [Preview Deployments](https://developers.cloudflare.com/pages/platform/preview-deployments/) unless specified not to in your [branch build controls](https://developers.cloudflare.com/pages/platform/branch-build-controls/). All changes to the Production Branch (commonly "main") will result in a Production Deployment. ->>>>>>> eeb6b351d7a8841d850dd1bb56dcf6635c9ed6ee +在你的项目被导入和部署后，所有对分支的后续推送都会生成 [预览部署](https://developers.cloudflare.com/pages/platform/preview-deployments/)，除非你特意在 [分支构建控制](https://developers.cloudflare.com/pages/platform/branch-build-controls/) 中写明不触发。所有对 **生产分支**（通常是 "main"）的更改都会生成一个 **生产部署**。 你也可以添加自定义域名，并自定义各个页面的构建设置。查看 [Cloudflare 页面与 Git 集成](https://developers.cloudflare.com/pages/get-started/#manage-your-site) 了解更多详情。