Skip to main content

Nuxt Framework 介绍

设置一个 Nuxt 项目​

确认目录结构​

假设 monorepo 根目录名字是 essg，常见目录结构如下：

essg/
├─ apps/             # 放前端/后端应用
│  └─ nuxt/          # 新建的 Nuxt 项目会放这里
├─ packages/         # 公共依赖或工具包
├─ node_modules/
├─ pnpm-workspace.yaml
└─ package.json

初始化 Nuxt 项目​

在 monorepo 根目录下执行：

pnpm dlx nuxi@latest init apps/nuxt01

安装依赖​

在 monorepo 的根目录下运行：

pnpm install

pnpm 会识别这是 workspace 下的一个项目。

启动开发服务器​

pnpm --filter=@essg/nuxt01 run dev

说明：

  • 因为是在库的根目录下执行pnpm命令，--filter=@essg/nuxt01表示执行项目 nuxt01 下package.json定义的命令 dev；
  • 默认运行在http://localhost:3000端口，如果该端口被占用，会使用下一个可以的端口；

其他常见命令​

pnpm --filter @essg/nuxt01 build   # 构建生产环境
pnpm --filter @essg/nuxt01 preview # 预览生产构建

nuxt.config.ts常见配置​

部署到 Cloudflare Pages​

可以在nuxt.config.ts文件中，通过 nitro 选项来设置 preset。

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    // 假设想部署到 Cloudflare Pages
    preset: 'cloudflare-pages',
  },
});

设置完成后，运行npm run build时，Nitro 就会根据指定的预设来生成相应的构建产物。

1. 配置 nuxt.config.ts

nxut.config.ts 在项目目录下，为了更好的兼容 Cloudflare Pages，添加如下参数：

export default defineNuxtConfig({
  ssr: true,
  nitro: {
      preset: 'cloudflare-pages',
  }
})

2. 构建生产环境

执行构建指令。该构建指令在 Nuxt 项目初始化的时候应该加入到项目目录下的package.json中。

pnpm --filter @essg/nuxt01 run build

以下是package.json的一个模板

  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "cf-deploy": "wrangler deploy pages dist"
  },
  "dependencies": {
    "nuxt": "^4.0.3",
    "vue": "^3.5.20",
    "vue-router": "^4.5.1"
  }

3. 发布到 Cloudflare Pages

在项目目录下（比如：apps/nuxt01）执行：

wrangler pages deploy dist --project-name=<项目名称>

说明：

  • 第一次执行完后，以后不需要再指定 --project-name；

Nuxt Javascript Framework 使用 Nitro 作为核心构建引擎。它负责将您的 Nuxt 应用编译成适合在不同环境中部署的格式，如 Node.js 服务器、无服务器函数（Serverless Functions）或边缘函数（Edge Functions）。

Nitro 使用**预设（presets）**来配置不同的构建目标。每个预设都代表一种特定的部署环境，并且会根据该环境自动调整所有必要的配置。

可以将这些预设看作是 Nitro 的“开关”，每个开关都决定了最终的打包方式。

常用的 Nitro 预设（Presets） 以下是一些最常见的预设，它们涵盖了可能遇到的各种部署场景：

  1. node (默认):

    用途：用于在标准的 Node.js 服务器上运行 Nuxt 应用。

    特点：生成一个可以在任何 Node.js 环境下运行的服务器脚本。这是您在本地开发和测试时使用的默认预设。

  2. vercel:

    用途：专为 Vercel 平台优化。

    特点：自动将应用拆分为静态资源和 Vercel Serverless Functions。这与 Next.js 在 Vercel 上的部署方式非常相似，它会智能地将 SSR 页面和 API 路由打包成函数。

  3. netlify:

    用途：专为 Netlify 平台优化。

    特点：与 Vercel 预设类似，但它会生成符合 Netlify Functions 规范的无服务器函数。

  4. cloudflare-pages:

    用途：专为 Cloudflare Pages 和 Cloudflare Workers 平台优化。

    特点：生成可以在 Cloudflare 的边缘网络上运行的 Worker。这是一种非常高效的部署方式，可以在全球多个数据中心运行，提供极低的延迟。

  5. static:

    用途：生成一个完全静态的网站。

    特点：如果只想构建一个纯粹的静态网站（没有 SSR 或 API 路由）时，可以使用这个预设。它会生成所有页面的 HTML 文件，可以托管在任何静态文件服务上，如 Cloudflare Pages 或 GitHub Pages。

指定 nuxt 应用的本地端口​

在nuxt.config.ts中进行如下设置：

devServer: {
  port: 3550,
},