配置与部署

🎯 引言

学会这篇文章，你能根据项目需求配置 Nuxt，并选择合适的渲染模式和部署方式。你会掌握 nuxt.config.ts 的常用项、runtimeConfig 的用法，以及 SSR、SSG、CSR 三种模式的区别。

🧱 nuxt.config.ts 是什么

nuxt.config.ts 是 Nuxt 项目的核心配置文件，用来控制模块、运行时设置、构建行为、开发服务器等。

一个最基础的配置长这样：

export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: ['@pinia/nuxt'],
    css: ['~/assets/css/main.css'],
    app: {
        head: {
            title: '我的 Nuxt 博客',
            meta: [{ name: 'description', content: '基于 Nuxt 构建的技术博客' }],
        },
    },
});

⚙️ 常用配置项

css：全局样式

如果你想让某些 CSS 在所有页面都生效，可以在 css 数组中配置：

export default defineNuxtConfig({
    css: ['~/assets/css/main.css'],
});

app.head：全局 head 信息

配置网站的标题、描述、图标、SEO 等元信息：

export default defineNuxtConfig({
    app: {
        head: {
            title: '我的博客',
            meta: [{ name: 'description', content: '分享前端技术' }],
            link: [{ rel: 'icon', href: '/favicon.ico' }],
        },
    },
});

modules：扩展功能

Nuxt 的模块系统可以扩展框架能力，比如 Pinia、Content、Image 等都是通过模块引入的：

export default defineNuxtConfig({
    modules: ['@pinia/nuxt', '@nuxt/content'],
});

🔐 runtimeConfig：运行时配置

项目里经常有一些配置不想写死在代码里，比如 API 地址、密钥等。Nuxt 提供了 runtimeConfig。

export default defineNuxtConfig({
    runtimeConfig: {
        // 服务端私有，不会暴露给客户端
        apiSecret: 'xxxxxx',
        // 客户端可访问，需要 public 包裹
        public: {
            apiBase: 'https://api.example.com',
        },
    },
});

在组件中使用：

<script setup>
const config = useRuntimeConfig();

console.log(config.public.apiBase); // 客户端和服务端都能访问
console.log(config.apiSecret);      // 只能在服务端访问
</script>

🌐 三种渲染模式

Nuxt 支持三种渲染模式，选择哪种取决于你的业务需求：

🚀 部署方式

SSR 部署

SSR 项目需要 Node.js 服务器运行。构建命令：

npm run build

构建完成后，运行：

node .output/server/index.mjs

SSG 静态部署

如果项目适合纯静态，可以先执行：

npm run generate

这会生成 dist/ 目录，里面全是静态 HTML 和资源，可以直接上传到 CDN、GitHub Pages、Vercel 等静态托管平台。

🧾 小节总结

• nuxt.config.ts 是 Nuxt 的核心配置文件，常用项包括 css、app.head、modules。
• runtimeConfig 用来管理运行时可配置项，public 下的内容客户端可访问，其他内容仅服务端可访问。
• Nuxt 默认使用 SSR，适合需要 SEO 和动态内容的场景；SSG 适合内容稳定的站点；CSR 适合后台系统。
• npm run build 用于 SSR 部署，npm run generate 用于静态站点生成。

❓ 知识问答

Q1：runtimeConfig 和 app.config 有什么区别？

runtimeConfig 适合放环境相关的配置（如 API 地址、密钥）；app.config 适合放应用级别的静态配置（如主题名称、版本号）。

Q2：SSG 模式下动态路由怎么办？

需要在 nuxt.config.ts 中配置 nitro.prerender.routes，列出需要预渲染的动态路径。

Q3：Nuxt 项目可以部署到纯静态托管吗？

可以，只要执行 npm run generate 生成 dist/ 目录，再上传到静态托管平台即可。

Q4：SSR 和 SSG 哪个对 SEO 更好？

两者都能输出 HTML，对 SEO 都比较友好。SSR 适合内容频繁变化的场景，SSG 适合内容稳定的场景。

🧪 小练习

完成以下配置任务：

1. 在 nuxt.config.ts 中配置全局网站标题为“我的 Nuxt 站点”。
2. 添加 runtimeConfig.public.apiBase，值为 https://jsonplaceholder.typicode.com。
3. 在 app/pages/index.vue 中用 useRuntimeConfig().public.apiBase 替换之前写死的接口地址。
4. 分别尝试 npm run build 和 npm run generate，观察 .output/ 和 dist/ 目录的区别。

export default defineNuxtConfig({
    // 请在这里配置全局标题
    runtimeConfig: {
        public: {
            // 请在这里配置 apiBase
        },
    },
});

🎉 恭喜你完成了整个 Nuxt.js 入门课程！你已经掌握了 Nuxt 的目录约定、路由、数据获取、状态管理和部署配置，可以开始用 Nuxt 搭建真正的项目了。