【Nut3】nuxt.config.ts项目nuxt配置文件介绍

简言

记录下nuxt3的nuxt.config.ts文件的介绍和使用。
Nuxt Configuration

nuxt.config.ts

Nuxt可以通过一个单独的nuxt.config文件进行简单配置。

配置文件创建

nuxt.config文件的扩展名可以是.js、.ts或.mjs。
然后默认导出全局函数defineNuxtConfig的返回值，
defineNuxtConfig函数接收一个对象，可以在这个对象内进行相关配置。

defineNuxtConfig可以在全局范围内直接使用，无需导入，也可以从nuxt/config中显式导入defineNuxtConfig。

是ts文件时，ts类型提示可能报错，可以像我这样写，虽然没有ts类型语法提示（nuxt3源码没有），但不出现报错了。

import { defineNuxtConfig，NuxtConfig } from 'nuxt/config'
import type { InputConfig, ConfigLayerMeta } from 'c12'
export default defineNuxtConfig({
  // 我的Nuxt配置
} as InputConfig<NuxtConfig, ConfigLayerMeta>)

常用配置项介绍

配置项非常多，下面只介绍下常用的配置项使用方法。

rootDir

定义应用程序的根目录。
默认值：“/<rootDir>”，也就是你的项目路径。

通常不需要配置该选项。

alias

资源别名。
可以通过定义其他别名来访问 JavaScript 和 CSS 中的自定义目录。
默认值：

{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "assets": "/<srcDir>/assets",
  "public": "/<srcDir>/public"
}

在 webpack 上下文（图像源、CSS，但不包括 JavaScript）中，访问别名时必须使用 ~ 作为前缀。

可以自定义配置：

import { fileURLToPath } from "node:url"
export default {
  alias: {
    'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
    'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
    'data': fileURLToPath(new URL('./assets/other/data', import.meta.url))
  }
}

analyzeDir

设置 运行 nuxt analyze 代码分析命令 生成分析文件的目录。

默认 “/<rootDir>/.nuxt/analyze”（根目录下的.nuxt目录下的analyze文件夹）

app

应用程序配置，就是你这项目应用的一些配置，例如设置head信息、根元素id等。

大部份属性可以在单个页面上通过 definePageMeta 来重写。只允许使用可序列化的 JSON 值。

head

为每个页面的 设置默认配置。
默认值：

{
  "meta": [
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    },
    {
      "charset": "utf-8"
    }
  ],
  "link": [],
  "style": [],
  "script": [],
  "noscript": []
}

里面的只和html需要的属性值对应，只不过你要转成对象形式，例如：

app: {
  head: {
    meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    script: [
      // <script src="https://myawesome-lib.js"></script>
      { src: 'https://awesome-lib.js' }
    ],
    link: [
      // <link rel="stylesheet" href="https://myawesome-lib.css">
      { rel: 'stylesheet', href: 'https://awesome-lib.css' }
    ],
    // please note that this is an area that is likely to change
    style: [
      // <style type="text/css">:root { color: red }</style>
      { children: ':root { color: red }', type: 'text/css' }
    ],
    noscript: [
      // <noscript>JavaScript is required</noscript>
      { children: 'JavaScript is required' }
    ]
  }
}

layoutTransition

布局转换过渡效果，默认不启用。
示例：

layoutTransition: { name: 'layout', mode: 'out-in' }

pageTransition

页面的过渡效果，默认不启用。
示例：

pageTransition: { name: 'page', mode: 'out-in' },

rootId

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

rootTag

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

components

配置 Nuxt 组件自动注册。
此处配置的目录中的任何组件都可以在页面、布局（和其他组件）中使用，而无需明确导入。

默认值：

{
  "dirs": [
    {
      "path": "~/components/global",
      "global": true
    },
    "~/components"
  ]
}

看默认值是 components文件夹下是自动导入的。

css

全局设置（包含在每个页面中）的 CSS 文件/模块/库。
这个和nuxt2相似，有要全局引入的css文件可以在这配置。

Nuxt 会根据扩展名自动猜测文件类型，并使用相应的预处理器。如果需要使用，仍需安装所需的加载器。

css: [
  // Load a Node.js module directly (here it's a Sass file).
  'bulma',
  // CSS file in the project
  '~/assets/css/main.css',
  // SCSS file in the project
  '~/assets/css/main.scss'
]

debug

是否启用调试模式。
默认不开启，开启后会在服务器上打印钩子名称和时间，并在浏览器中记录钩子参数。

devtools

启用 Nuxt DevTools 进行开发。默认好像是启用的，可以enabled设置为false关掉。

  devtools: { enabled: true },

plugins

nuxt 应用程序插件数组。
每个插件可以是一个字符串（可以是文件的绝对路径或相对路径）。如果以 .client 或 .server 结尾，则只会在适当的上下文中自动加载。它也可以是一个包含 src 和 mode 键的对象。

plugins: [
  '~/plugins/foo.client.js', // only in client side
  '~/plugins/bar.server.js', // only in server side
  '~/plugins/baz.js', // both client & server
  { src: '~/plugins/both-sides.js' },
  { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
  { src: '~/plugins/server-only.js', mode: 'server' } // only on server side
]

插件也会在 ~/plugins 目录中自动注册，除非需要自定义顺序，否则无需在 nuxt.config 中列出这些插件。

postcss

里面有个plugins属性是配置 PostCSS 插件的选项。
postcss是css的转换工具，写h5时经常用这个。

    postcss: {
        plugins: {
            // 这个工具可以实现自动添加CSS3前缀
            "autoprefixer": {
              overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]
            },
            'postcss-pxtorem': {
                rootValue: 37.5, // 指定转换倍率，我现在设置这个表示1rem=37.5px;
                propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
                mediaQuery: false, // 是否允许使用媒体查询，false媒体查询的代码可用，true不可用
                exclude: 'ignore',
                replace: true, // 替换包含rem的规则，而不是添加回退
                minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
                unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
                selectorBalckList: ["van"], // 匹配不被转换为rem的选择器
            },
        },
    },

modules

模块是 Nuxt 扩展模块。
每个模块既可以是一个字符串（可以指一个软件包，也可以是一个文件的路径），也可以是一个元组（第一个字符串是模块，第二个对象是选项），还可以是一个内联模块函数。Nuxt 会尝试使用 node require path（在 node_modules 中）解析模块数组中的每个项目，如果使用 ~ alias，则会从项目 srcDir 解析。

模块是按顺序执行的，因此顺序很重要。

modules: [
  // Using package name
  '@nuxtjs/axios',
  // Relative to your project srcDir
  '~/modules/awesome.js',
  // Providing options
  ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  // Inline definition
  function () {}
]

devServer

项目的开发服务配置，和vite、webpack类似。

host

服务监听地址。

https

是否启用 HTTPS。

export default defineNuxtConfig({
  devServer: {
    https: {
      key: './server.key',
      cert: './server.crt'
    }
  }
})

port

服务监听端口。

nitro

nitro配置，是一个对象。nuxt3的开发服务是基于nitro实现的。
这里可以配置跨域代理。

 nitro: {
    devProxy: {
      '/api/': {
        target: 'http:192.168.9.70:3000/api/',
        changeOrigin: true
      }
    }
  },

build

共享的打包构建配置。
默认是vite打包，所以这个不用特别设置。

ssr

是否开启ssr，默认为true。

typescript

配置 Nuxt 的 TypeScript 集成。
建议不改动，默认设置就挺好。
示例：
关闭构建类型检查,类型补充提示使用编辑器的插件：

typescript: {
    typeCheck: false,
    shim: false,
  },

vite

将直接传递给 Vite 的配置。
支持mode、clearScreen、esbuild、optimizeDeps、resolve等。

vue

vue的配置项。

compilerOptions

相当于app.config.compilerOptions

webpack

webpack的配置。

extensions

应由 Nuxt 解析器解析的扩展名。

[
  ".js",
  ".jsx",
  ".mjs",
  ".ts",
  ".tsx",
  ".vue"
]

extends

从多个本地或远程来源扩展配置文件（个人理解）。
值应该是一个字符串或字符串数组，指向源目录或相对于当前配置的配置路径。

extends: [
    './base.nuxt.config.ts'
  ],

官网上意思好像是扩展项目用的，也没给示例，我理解不到具体应用场景，所以我当扩展配置文件来使用。

示例

// https://nuxt.com/docs/api/configuration/nuxt-config
import type { InputConfig, ConfigLayerMeta } from 'c12'

import { defineNuxtConfig, NuxtConfig, } from "nuxt/config";
import { fileURLToPath } from "node:url"

export default defineNuxtConfig({
  rootDir: "./",
  extends: [
    './base.nuxt.config.ts'
  ],
  typescript: {
    typeCheck: false,
    shim: false
  },
  //  这些样式表将内联到 Nuxt 渲染的 HTML 中，全局注入并出现在所有页面中。
  css: ['mavon-editor/dist/css/index.css', '~/assets/base.css', '~/assets/main.css'],
  //  别名
  alias: {
    "@/": "/<rootDir>/",
    "img": fileURLToPath(new URL('./assets/img', import.meta.url))
  },
  modules: [
    '@pinia/nuxt'
  ],
  plugins: [
    // '~/plugins/ant-design-vue',
    // '~/plugins/vue-use',
    // {
    //   src: '~/plugins/markdown.client.ts',
    //   mode: 'client'
    // },
    // {
    //   src: '~/plugins/barrier-free.client.ts',
    //   mode: 'client'
    // }
  ],
  // imports: {
  //   autoImport: true, //  自动导入
  //   dir: []
  // },
  debug: false,
  devServer: {
    host: '0.0.0.0',
    port: 5000,
  },

  nitro: {
    devProxy: {
      '/api/': {
        target: 'http:192.168.9.70:3000/api/',
        changeOrigin: true
      }
    }
  },
  devtools: { enabled: true },
  ssr: true,
  extractCSS: process.env.NODE_ENV === 'production',
} as InputConfig<NuxtConfig, ConfigLayerMeta>) 

结语

nuxt3由于可以是全栈的嘛，配置文件属性太多了，而且有的配置方法不只一种，所以配置详情请到官网查看，这里仅供参考。