Nuxt 菜鸟入门学习笔记二：配置

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：在构建时确定的公共令牌、网站配置（如主题变体、标题和任何不敏感的项目配置）。

  特性	**runtimeConfig**	**app.config**
  客户端	Hydrated	Bundled
  环境变量	Yes	No
  Reactive	Yes	Yes
  类型支持	部分	全部
  每个请求的配置	No	Yes
  模块热更新	No	Yes
  非原始 JS 类型	No	Yes

外部配置文件

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

配置项	原始配置文件	Nuxt 中如何配置
Nitro	nitro.config.ts	Use nitro key in nuxt.config
PostCSS	postcss.config.js	Use postcss key in nuxt.config
Vite	vite.config.ts	Use vite key in nuxt.config
webpack	vite.config.ts	Use webpack key in nuxt.config

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

配置项	配置文件	如何配置
TypeScript	tsconfig.json	查看详情
ESLint	.eslintrc.js	查看详情
Prettier	.prettierrc.json	查看详情
Stylelint	.stylelintrc.json	查看详情
TailwindCSS	tailwind.config.js	查看详情
Vitest	vitest.config.ts	查看详情

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 进行配置，具体配置需要我们结合实际场景和需求进行实践。