nuxt.config.ts 文件位于Nuxt项目的根目录下，可以覆盖或扩展应用程序的行为。

srcDir

定义Nuxt应用程序的源目录。默认是根目录 “/“

  1. srcDir: 'src/'

这将适用于以下文件夹结构：

  1. -| app/
  2. ---| node_modules/
  3. ---| nuxt.config.js
  4. ---| package.json
  5. ---| src/
  6. ------| assets/
  7. ------| components/
  8. ------| layouts/
  9. ------| middleware/
  10. ------| pages/
  11. ------| plugins/
  12. ------| static/
  13. ------| store/
  14. ------| server/

dirs 添加自动导入目录

自定义自动导入的目录数组。请注意，此选项不会覆盖默认目录（~/composables， ~/utils）
🙌🌰：

  1. imports: {
  2.   // Auto-import pinia stores defined in `~/stores`
  3.   dirs: ['stores']
  4. }

alias 路径别名

nuxt 默认配置

  1. {
  2.   "~~": "/<rootDir>",
  3.   "@@": "/<rootDir>",
  4.   "~": "/<rootDir>",
  5.   "@": "/<rootDir>",
  6.   "assets": "/<rootDir>/assets",
  7.   "public": "/<rootDir>/public"
  8. }
  1. alias: {
  2.   'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
  3.   'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
  4.   'data': fileURLToPath(new URL('./assets/other/data', import.meta.url))
  5. }

buildDir

构建目录，默认"/<rootDir>/.nuxt"
🙌🌰：

  1.  buildDir: 'nuxt-build'

app

Nuxt 应用程序配置。

baseURL

Nuxt 应用程序的基本路径，默认为 ‘/‘,通常不需要调整，如果有部署到GitHub Pages等需求可以调整 :::info

  1. 如果你要部署在 https://.github.io/ 上，你可以省略 base 使其默认为 ‘/‘。
  2. 如果你要部署在 https://.github.io// 上，例如你的仓库地址为 https://github.com//，那么请设置 baseUrl 为 ‘//‘ :::

    head

在每个页面上设置默认配置。默认值为

  1. {
  2.   "meta": [
  3.     {
  4.       "name": "viewport",
  5.       "content": "width=device-width, initial-scale=1"
  6.     },
  7.     {
  8.       "charset": "utf-8"
  9.     }
  10.   ],
  11.   "link": [],
  12.   "style": [],
  13.   "script": [],
  14.   "noscript": []
  15. }
  1. interface MetaObject {
  2.   title?: string
  3.   titleTemplate?: string | ((title?: string) => string)
  4.   templateParams?: Record<string, string | Record<string, string>>
  5.   base?: Base
  6.   link?: Link[]
  7.   meta?: Meta[]
  8.   style?: Style[]
  9.   script?: Script[]
  10.   noscript?: Noscript[];
  11.   htmlAttrs?: HtmlAttributes;
  12.   bodyAttrs?: BodyAttributes;
  13. }

🙌🌰：

  1.  app: {
  2.     head: {
  3.       meta: [
  4.         { charset: "utf-8" },
  5.         { name: "viewport", content: "width=device-width, initial-scale=1" },
  6.         {
  7.           hid: "keywords",
  8.           name: "keywords",
  9.           content: "公司名称 产品名称1 产品名称2 各种关键词",
  10.         },
  11.         {
  12.           hid: "description",
  13.           name: "description",
  14.           content: "详细描述，公司描述、产品描述等等等等",
  15.         },
  16.         { name: "format-detection", content: "telephone=no" },
  17.       ],
  19.       link: [
  20.         { rel: "stylesheet", href: "https://awesome-lib.css" },
  21.         { rel: "icon", type: "image/x-icon", href: "/favicon.svg" },
  22.       ],
  23.       script: [
  24.         { src: "https://awesome-lib.js" },
  25.         { src: "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxx" },
  26.       ],
  27.       noscript: [
  28.         // <noscript>JavaScript is required</noscript>
  29.         { children: "JavaScript is required" },
  30.       ],
  31.     },
  32.   },

keepalive

默认 false

layoutTransition

pageTransition

rootId

默认”__nuxt”
自定义Nuxt根元素ID。

image.png

rootTag

自定义Nuxt根元素标签。默认div

css 全局 css

  1.  css: [
  2.     '@/assets/styles/animate.css',
  3.     '@/assets/styles/normalize.css',
  4.     '@/assets/styles/global.less'
  5.   ],

modules

模块是Nuxt扩展，可以扩展其核心功能并添加无穷无尽的集成。

🙌🌰：

  1. modules: [
  2.   // Using package name
  3.   '@nuxtjs/axios',
  4.   // Relative to your project srcDir
  5.   '~/modules/awesome.js',
  6.   // Providing options
  7.   ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  8.   // Inline definition
  9.   function () {}
  10. ]

:::info 注意：模块是按顺序执行的，因此顺序很重要。 :::