使用 Vue 和 UI Pro 的仪表板模板
部署

Cloudflare

将您的 Nuxt 应用程序部署到 Cloudflare 基础设施。

Cloudflare Pages

零配置 ✨
与 Cloudflare Pages 的集成无需任何配置,了解更多.

Git 集成

如果您使用 GitHub/GitLab 与 Cloudflare Pages 集成,无需任何配置。推送到您的仓库将自动构建您的项目并进行部署。

Nuxt 将检测环境以设置正确的 服务器/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 构建您的项目
    终端
    npx nuxi build --preset=cloudflare_pages
    
  2. 部署,它会要求您首次创建项目
    终端
    wrangler pages deploy dist/
    

禁用自动压缩

确保在 CloudFlare -> Speed -> Optimization -> Auto Minify 中禁用 HTML、CSS 和 JavaScript 的压缩,以避免任何 Vue 水合。

Disable Cloudflare auto minify

了解更多

前往 Nitro 文档 了解更多关于 Cloudflare 部署预设的信息。
前往 CloudFlare Pages 文档了解更多信息。

模板

Nuxt Todos Edge

一个带有用户身份验证、SSR 和 Cloudflare D1 的待办事项应用程序。

Atinotes

基于 Cloudflare KV 的具有通用渲染的可编辑网站。

了解更多

前往 Nitro 文档 了解更多关于 cloudflare 部署预设的信息。