Nuxt 官网地址：https://nuxt.com/

默认情况下，Nuxt 的配置涵盖了大多数用例。nuxt.config.ts 文件可以覆盖或扩展默认配置。

Nuxt 配置

nuxt.config.ts文件位于 Nuxt 项目的根目录，可以覆盖或扩展应用程序的行为。

最小配置文件导出defineNuxtConfig函数，该函数包含一个包含您的配置的对象。defineNuxtConfig辅助函数无需导入即可全局使用。

export default defineNuxtConfig({
  // My Nuxt config
});

该文件经常在文档中提及，例如用于添加自定义脚本、注册模块或更改渲染模式。

环境覆盖

您可以在 nuxt.config 中配置完全类型化的环境重载。

// nuxt.config.ts

export default defineNuxtConfig({
  $production: {
    routeRules: {
      "/**": { isr: true },
    },
  },
  $development: {
    //
  },
});

环境变量和私有令牌

runtimeConfig API 将环境变量等值公开（暴露）给应用程序的其他部分。默认情况下，这些键值只在服务器端可用。runtimeConfig.public中的键值在客户端也是可用的。

这些值应在nuxt.config中定义，并可使用环境变量覆盖。

// nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available server-side
    // 最外层的key只能使用在服务端
    apiSecret: "123",
    // 在public下的key在服务端和客户端都可以使用
    public: {
      apiBase: "/api",
    },
  },
});

在环境变量.env文件中进行覆盖：

// .env

# 将覆盖nuxt.config中的apiSecret
NUXT_API_SECRET=api_secret_token

这些变量将通过useRuntimeConfig组合式函数暴露给应用程序的其他部分。

// pages/index.vue

<script setup>const runtimeConfig = useRuntimeConfig();</script>

应用配置

app.config.ts文件位于源代码目录（默认情况下位于项目根目录）中，用于公开可在构建时确定的公有变量。与 runtimeConfig 选项相反，这些变量不能通过环境变量覆盖。

一个最小的配置文件导出defineAppConfig函数，该函数包含一个包含配置的对象。defineAppConfig辅助函数无需导入即可全局使用。

// app.config.ts

export default defineAppConfig({
  title: "Hello Nuxt",
  theme: {
    dark: true,
    colors: {
      primary: "#ff0000",
    },
  },
});

这些变量通过使用 useAppConfig 可组合变量暴露给应用程序的其他部分。

// pages/index.vue

<script setup>
  const appConfig = useAppConfig(); console.log({appConfig}); //
  如果此处运行结果为undefined，可重启服务后尝试
</script>

runtimeConfig 与 app.config

如上所述，runtimeConfig和app.config都用于向应用程序的其他部分公开变量。要确定是使用其中一个还是另一个，这里有一些指导原则：

• runtimeConfig：需要在构建后使用环境变量指定的私有或公用令牌。
• app.config：在构建时确定的公共令牌、网站配置（如主题变体、标题和任何不敏感的项目配置）。

外部配置文件

Nuxt 使用nuxt.config.ts文件作为配置的唯一信任来源，并跳过读取外部配置文件。在构建项目的过程中，您可能需要配置这些配置。下表强调了常见的配置，以及在适用的情况下，如何使用 Nuxt 配置它们。

以下是其他常见配置文件的列表：

Vue 配置支持

配置 Vite

如果需要将选项传递给 @vitejs/plugin-vue 或 @vitejs/plugin-vue-jsx，可以在 nuxt.config 文件中完成。

• vite.vue 用于 @vitejs/plugin-vue。点此查看可用选项。
• vite.vueJsx 用于 @vitejs/插件-vue-jsx。点此查看可用选项。

// nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true,
    },
    vueJsx: {
      mergeProps: true,
    },
  },
});

配置 webpack

如果您使用 webpack 并需要配置 vue-loader，您可以使用 nuxt.config 文件中的webpack.loaders.vue key 来配置。点击这里查看定义了的可用选项。

// nuxt.config.ts

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      },
    },
  },
});

启用试验性 Vue 功能

您可能需要启用 Vue 中的实验特性，如 defineModel 或 propsDestructure。Nuxt 在 nuxt.config.ts 中提供了一种简便的方法，无论您使用哪种构建器：

// nuxt.config.ts

export default defineNuxtConfig({
  vue: {
    defineModel: true,
    propsDestructure: true,
  },
});

本文只是简单介绍了如何对 Nuxt 进行配置，具体配置需要我们结合实际场景和需求进行实践。