【Nuxt3系列二】配置Nuxt

本节对应的官方教程

Nuxt的配置

根目录下面有一个nuxt.config.ts

它的内容大概是这个样子的

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

默认配置已经可以应对大部分情况

不同环境的变量

可以针对不同的环境，配置不同的值 例如配置production和development的环境就如下

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    //
  }
})

而这部分配置，在运行的时候也可以获取得到

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
</script>

应用的配置

如果你构建了一个后台应用，想要配置一些基本的网站名称、主题之类的环境变量。那么你可以在根目录创建app.config.ts

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

这样的话，你可以在vue文件中，安装下面这样进行使用

<script setup lang="ts">
const appConfig = useAppConfig()
</script>

注意，这个文件不能像nuxt.config.ts一样配置不同环境的值

runtimeConfig VS app.config

综上所述，这两个配置文件都是用来配置应用程序的变量的。但是什么情况下使用runtimeConfig，什么情况下使用app.config呢？ 这里有个原则:

• runtimeConfig：用于配置不同环境下的敏感信息，例如不同变量环境下需要使用不同的令牌、项目地址
• app.config: 所有环都通用的主题、标题等等

扩展配置

Nuxt还依赖许多基础库，如果需要配置这些基础库，可以在nuxt.config.ts定义这个key

名称	被代替的配置文件	如何配置
Nitro	nitro.config.ts	在nuxt.config定义一个nitro属性
PostCSS	postcss.config.js	在nuxt.config定义一个postcss属性
Vite	vite.config.ts	在nuxt.config定义一个vite属性
webpack	webpack.config.ts	在nuxt.config定义一个webpack属性

例如我需要修改Vite的配置

export default defineNuxtConfig({
  vite: {
    //输入配置
  }
})

还有很多其它配置，我就不一一说明了，暂时用不到。 简单列出来一下就可以了

• TypeScript
• ESLint
• Prettier
• Stylelint
• TailwindCSS
• Vitest