1. Nuxt配置
      1. 环境变量和私有变量
    2. 应用配置
    3. 扩展配置
    4. 参考

Nuxt的默认配置一般能覆盖大多数场景。如需要自定义,则可以通过修改nuxt.config.ts来实现。

Nuxt配置

nuxt.config.ts文件位于项目根目录,格式如下:

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

详细配置选项可参考Configuration Reference

环境变量和私有变量

runtimeConfig是用来给应用暴露环境变量的接口。默认情况下,这部分变量只能在服务端使用。在runtimeConfig.public配置后,变量将也能在客户端使用。

export default defineNuxtConfig({
  runtimeConfig: {
    // 私有变量,只能在服务端使用
    apiSecret: '123',
    // public中定义的环境变量,也可以在客户端代码中使用(比如onMounted生命周期函数中)
    public: {
      apiBase: '/api'
    }
  }
})

.env文件中的变量可以覆盖nuxt.config.ts中的定义

# 以下在.env文件中定义的变量,将会覆盖apiSecret的值
NUXT_API_SECRET=api_secret_token

在应用中使用环境变量

<script setup>
const runtimeConfig = useRuntimeConfig()
console.log(runtimeConfig.apiSecret)
</script>

应用配置

应用配置文件app.config.ts也位于项目根目录。如果没有,你可以手动创建。

应用配置中定义的变量,只能在构建时使用。而上面的runtimeConfig则是在运行时使用。

应用配置无法通过环境变量文件.env改写。

app.config.ts的格式如下:

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

用法:

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

扩展配置

名称 配置文件 如何配置
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参数

参考

本文非完整翻译自:https://nuxt.com/docs/getting-started/configuration