nuxt3项目中的相关配置主要放在项目根目录下的nuxt.config.ts
文件中,除了nuxt3框架需要的配置属性外,你也可以扩展添加自已处理的配置。
默认情况下,配置文件是这样的。
export default defineNuxtConfig({
// My Nuxt config
})
框架本身支持的配置项可以在这里查看。
配置文件并不是一定要使用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配置详解