【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 changestyle: [// <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 definitionfunction () {}
]

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