nuxt3配置(defineNuxtConfig)详解

nuxt3(defineNuxtConfig)配置详解

nuxt3项目中的相关配置主要放在项目根目录下的nuxt.config.ts文件中，除了nuxt3框架需要的配置属性外，你也可以扩展添加自已处理的配置。
默认情况下,配置文件是这样的。

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

框架本身支持的配置项可以在这里查看。
::: alertinfo
配置文件并不是一定要使用TypeScript语言来编写。但这里还是推荐使用TypeScript，这样编写会更加方便点,IDE对TypeScript语法提示还是要比JavaScript更好些。
:::

运行时配置

runtimeConfig接口的作用与环境变量类似，在项目中可以使用此接口暴露出来的变量。默认情况下，这些变量只能在服务端使用，但在runtimeConfig.public下的配置也可以在客户端中使用。
这些变量的值需要定义在nuxt.config中，并且可以被环境变量覆盖。
例如:

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available server-side
    apiSecret: '123',
    // Keys within public are also exposed client-side
    public: {
      apiBase: '/api'
    }
  }
})

环境变量覆盖

# This will override the value of apiSecret
NUXT_API_SECRET=api_secret_token

应用配置

app.config.ts文件默认在项目的根目录下，里头的配置主要是在项目的构建和编译阶段中会使用到。与运行时的配置相反，这里的配置不能被环境变量覆盖。

配置文件中最简单的内容就是导出一个defineAppConfig方法，此方法中有一个你配置对象。

// app.config.ts
export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

这些变量可以在项目中通过useAppConfig接口来使用.

<script setup>
const appConfig = useAppConfig()
</script>

runtimeConfig与app.config

这两个的作用都是暴露变量给项目中使用。那在实际项目开发过程中到底使用哪个呢。

• runtimeConfig:项目中需要使用指定的私有和仅有的tokes时
• app.config:可以放一些需要在构建时使用的公共Token, 例如主题变量，标题等不敏感的数据。

外部配置文件

nuxt3将部分的外部模块的配置都放到了nuxt.config.ts中。

名称	配置文件	如何配置
Nitro	nitro.config.ts	在nuxt.config中使用关键字nitro来配置
PostCSS	postcss.config.ts	在nuxt.config中使用关键字postcss来配置
Vite	vite.config.ts	在nuxt.config中使用关键字vite来配置
webpack	webpack.config.ts	在nuxt.config中使用关键字webpack来配置
TypeScript	tsconfig.json	详细介绍
ESLint	.eslintrc.js	代码检查工具详细介绍
Prettier	.prettierrc.json	代码格式化详细介绍
Stylelint	stylelintrc.json	CSS代码规范工具详细介绍
TailwindCSS	tailwind.config.js	CSS工具库详细介绍
Vitest	vitest.config.ts	详细介绍

版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt3配置详解