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