Vite 3

Vite ↗ 是面向前端开发者的下一代构建工具。随着 Vite 3 发布 ↗，开发者可以利用新的命令行 (CLI) 改进、Starter 模板以及更多功能 ↗来构建前端应用。

Cloudflare Pages 原生支持 Vite 3 项目。有关使用 Vite 3 和 Cloudflare Pages 优化应用构建工具的更多信息，请参阅关于 Pages 构建流程改进 ↗（包括亚秒级构建初始化）的博客文章。

在本指南中，你将了解如何使用 Vite 3 启动新项目并部署到 Cloudflare Pages。

npm create vite@latest

yarn create vite

pnpm 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：

在 Cloudflare 仪表板中，前往 Workers & Pages 页面。
Go to Workers & Pages ↗
选择 Create application（创建应用程序） > Pages > Import from an existing Git repository（从现有 Git 仓库导入）。
选择新的 GitHub 仓库。
在 Set up builds and deployments（设置构建和部署） 中，将 npm run build 设为 Build command（构建命令），将 dist 设为 Build output directory（构建输出目录）。

完成配置后，选择 Save and Deploy（保存并部署）。

你将看到首次部署流水线正在进行。Pages 安装所有依赖并按指定方式构建项目。部署项目后，可通过 <YOUR_PROJECT_NAME>.pages.dev 子域访问。在 Workers & Pages > 选择 Pages 项目 > Deployments（部署） 中查找项目子域。

每次推送新提交时，Cloudflare Pages 都会自动重新构建并部署项目。

此外，你还可以使用预览部署，对 pull request 重复构建和部署流程。这样可以在部署到生产环境之前，通过真实 URL 预览项目更改。

了解更多

完成本指南后，你已成功将 Vite 3 站点部署到 Cloudflare Pages。要开始使用其他框架，请参阅框架指南列表。