NuxtJS v3 第二章 （配置文件：nuxt.config.ts 与 app.config.ts）

在 Nuxt.js 生态中，nuxt.config.ts 和 app.config.ts 是两个核心的配置文件，它们各自承担着不同的职责。虽然它们都服务于同一个目标------让 Nuxt 应用运行得更好，但它们的应用场景、配置内容和时机有所区别。了解这些差异对于合理地组织和优化你的 Nuxt 应用配置至关重要。

nuxt.config.ts 文件

使用场景：自定义构建和模块配置

nuxt.config.ts 文件最常见的使用场景之一是自定义构建过程和模块配置。你可以在这里配置 webpack、添加全局 CSS、注册 Nuxt.js 模块、配置加载器等。

示例：配置 webpack 和全局样式

以下是一个 nuxt.config.ts 文件的示例，演示了如何自定义 webpack 配置和添加全局样式。

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  // 全局 CSS
  css: [
    '~/assets/css/main.css',
    '~/assets/css/custom.css'
  ],
  // 构建配置
  build: {
    // 扩展 webpack 配置
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },
    // 添加 webpack 插件
    plugins: [
      new MyAwesomeWebpackPlugin()
    ],
    // 配置加载器
    loaders: {
      less: {
        // 自定义 less-loader 配置
      },
      vue: {
        // 自定义 vue-loader 配置
      }
    }
  },
  // 模块配置
  modules: [
    // 注册 Nuxt.js 模块
    '@nuxtjs/axios',
  ],
  // Axios 模块配置
  axios: {
    baseURL: 'https://api.example.com'
  }
})

使用场景：插件和中间件

nuxt.config.ts 文件也用于配置插件和中间件，这些插件和中间件可以增强应用的功能或在服务器端和客户端之间共享代码。

示例：注册和配置插件

以下是如何在 nuxt.config.ts 文件中注册和配置插件的示例。

export default defineNuxtConfig({
  // 插件配置
  plugins: [
    '~/plugins/axios-accessor.ts', // 注册插件
    { src: '~/plugins/other-plugin.js', mode: 'client' } // 仅在客户端运行的插件
  ]
})

使用场景：性能优化

nuxt.config.ts 文件还可以用来进行性能优化，例如配置页面缓存策略、服务端渲染设置等。

示例：性能优化配置

以下是如何在 nuxt.config.ts 文件中进行性能优化的示例。

export default defineNuxtConfig({
  // 性能配置
  performance: {
    prefetch: true, // 启用链接预取
    gzip: false // 禁用 gzip 压缩
  },
  // 服务端渲染配置
  ssr: {
    // 服务端渲染相关配置
  }
})

app.config.ts 文件

使用场景：构建时确定的应用配置

app.config.ts 文件的主要使用场景是为应用程序提供在构建时就可以确定的配置。这些配置通常包括但不限于应用的元数据、主题设置、全局样式变量等。与 runtimeConfig 不同，app.config.ts 中的配置不会被环境变量覆盖，这意味着它们在构建时就已经确定并且在整个应用生命周期中保持不变。

示例：定义应用元数据和主题

以下是一个 app.config.ts 文件的示例，其中定义了应用的标题、描述、主题颜色等元数据和主题设置。

import { defineAppConfig } from 'nuxt/app'

export default defineAppConfig({
  // 应用的标题，通常用于 SEO 和默认的 HTML <title> 标签
  title: 'My Awesome Nuxt App',
  // 应用的描述，有助于 SEO
  description: 'An amazing app built with Nuxt.js',
  // 应用的主题配置
  theme: {
    // 是否启用暗色主题
    dark: true,
    // 主题颜色设置
    colors: {
      primary: '#4DBA87',
      accent: '#FFC107',
      secondary: '#00BCD4',
      info: '#26A69A',
      warning: '#FFC107',
      error: '#FF5252',
      success: '#4CAF50'
    }
  },
  // 全局 CSS 文件或模块
  css: [
    '~/assets/css/main.css',
    '~/assets/css/animations.css'
  ],
  // 全局设置 HTML 属性
  htmlAttrs: {
    lang: 'en'
  },
  // 全局设置 body 属性
  bodyAttrs: {
    class: 'app-body'
  }
})

示例：全局样式和 HTML 属性

在 app.config.ts 文件中，你还可以定义全局的 CSS 样式文件，以及 HTML 和 body 标签的属性。这些设置将应用于整个应用程序，确保了一致的样式和行为。

nuxt.config.ts 与 app.config.ts 的比较

相同点

1. 配置目的：两者都旨在为 Nuxt 应用提供配置选项。
2. 提高可维护性：通过分离配置，两个文件都有助于组织和维护项目设置。
3. 支持 TypeScript：两个文件都可以使用 TypeScript 来提供类型安全和智能提示。

不同点

1. 配置范围：

   • nuxt.config.ts：这是 Nuxt 应用的全局配置文件，用于定义构建过程、模块、插件、路由、性能优化等方面的设置。
   • app.config.ts：这是一个更专注于应用级别的配置文件，用于定义构建时确定的配置，如应用元数据、主题、全局样式等。

2. 配置时机：

   • nuxt.config.ts：配置可以在运行时动态更改，例如使用环境变量来调整不同环境下的行为。
   • app.config.ts：配置在构建时确定，不会在运行时更改。

3. 环境变量：

   • nuxt.config.ts：可以使用环境变量来覆盖配置，适用于敏感数据或需要根据不同环境变化的设置。
   • app.config.ts：不支持使用环境变量覆盖，配置在构建时就已经固定。

4. 配置内容：

   • nuxt.config.ts：可以包含服务器端和客户端的配置，涉及到整个应用的构建和运行。
   • app.config.ts：主要包含客户端的配置，如页面头部信息、主题设置等。

何时使用 app.config.ts

当你需要定义在构建时就可以确定的应用级别配置时，应该使用 app.config.ts。例如，你想要设置应用的标题、描述、全局 CSS、HTML 属性等，这些不会在应用运行时改变的配置项。

何时使用 nuxt.config.ts

当你需要配置影响整个应用构建和运行的全局设置时，应该使用 nuxt.config.ts。这包括配置模块、插件、构建选项、加载器、性能优化、环境变量等。

总结

nuxt.config.ts 和 app.config.ts 在 Nuxt 应用中各司其职，分别处理全局和应用级别的配置。理解它们的不同之处和适用场景，可以帮助你更好地组织项目配置，并充分利用 Nuxt 提供的强大功能。记住，合理地使用这两个配置文件，是构建高效、可维护 Nuxt 应用的关键。