簡言

記錄下nuxt3的nuxt.config.ts文件的介紹和使用。
Nuxt Configuration

nuxt.config.ts

Nuxt可以通過一個(gè)單獨(dú)的nuxt.config文件進(jìn)行簡單配置。

配置文件創(chuàng)建

nuxt.config文件的擴(kuò)展名可以是.js、.ts或.mjs。
然后默認(rèn)導(dǎo)出全局函數(shù)defineNuxtConfig的返回值，
defineNuxtConfig函數(shù)接收一個(gè)對象，可以在這個(gè)對象內(nèi)進(jìn)行相關(guān)配置。

defineNuxtConfig可以在全局范圍內(nèi)直接使用，無需導(dǎo)入，也可以從nuxt/config中顯式導(dǎo)入defineNuxtConfig。

是ts文件時(shí)，ts類型提示可能報(bào)錯(cuò)，可以像我這樣寫，雖然沒有ts類型語法提示（nuxt3源碼沒有），但不出現(xiàn)報(bào)錯(cuò)了。

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

常用配置項(xiàng)介紹

配置項(xiàng)非常多，下面只介紹下常用的配置項(xiàng)使用方法。

rootDir

定義應(yīng)用程序的根目錄。
默認(rèn)值：“/<rootDir>”，也就是你的項(xiàng)目路徑。

通常不需要配置該選項(xiàng)。

alias

資源別名。
可以通過定義其他別名來訪問 JavaScript 和 CSS 中的自定義目錄。
默認(rèn)值：

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

在 webpack 上下文（圖像源、CSS，但不包括 JavaScript）中，訪問別名時(shí)必須使用 ~ 作為前綴。

可以自定義配置：

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

設(shè)置 運(yùn)行 nuxt analyze 代碼分析命令 生成分析文件的目錄。

默認(rèn) “/<rootDir>/.nuxt/analyze”（根目錄下的.nuxt目錄下的analyze文件夾）

app

應(yīng)用程序配置，就是你這項(xiàng)目應(yīng)用的一些配置，例如設(shè)置head信息、根元素id等。

大部份屬性可以在單個(gè)頁面上通過 definePageMeta 來重寫。只允許使用可序列化的 JSON 值。

head

為每個(gè)頁面的 設(shè)置默認(rèn)配置。
默認(rèn)值：

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

里面的只和html需要的屬性值對應(yīng)，只不過你要轉(zhuǎn)成對象形式，例如：

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

布局轉(zhuǎn)換過渡效果，默認(rèn)不啟用。
示例：

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

pageTransition

頁面的過渡效果，默認(rèn)不啟用。
示例：

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

rootId

自定義 Nuxt 根元素 ID名。
默認(rèn)"__nuxt"

rootTag

自定義 Nuxt 根元素標(biāo)簽。
默認(rèn)“div”.

components

配置 Nuxt 組件自動注冊。
此處配置的目錄中的任何組件都可以在頁面、布局（和其他組件）中使用，而無需明確導(dǎo)入。

默認(rèn)值：

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

看默認(rèn)值是 components文件夾下是自動導(dǎo)入的。

css

全局設(shè)置（包含在每個(gè)頁面中）的 CSS 文件/模塊/庫。
這個(gè)和nuxt2相似，有要全局引入的css文件可以在這配置。

Nuxt 會根據(jù)擴(kuò)展名自動猜測文件類型，并使用相應(yīng)的預(yù)處理器。如果需要使用，仍需安裝所需的加載器。

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

是否啟用調(diào)試模式。
默認(rèn)不開啟，開啟后會在服務(wù)器上打印鉤子名稱和時(shí)間，并在瀏覽器中記錄鉤子參數(shù)。

devtools

啟用 Nuxt DevTools 進(jìn)行開發(fā)。默認(rèn)好像是啟用的，可以enabled設(shè)置為false關(guān)掉。

  devtools: { enabled: true },

plugins

nuxt 應(yīng)用程序插件數(shù)組。
每個(gè)插件可以是一個(gè)字符串（可以是文件的絕對路徑或相對路徑）。如果以 .client 或 .server 結(jié)尾，則只會在適當(dāng)?shù)纳舷挛闹凶詣蛹虞d。它也可以是一個(gè)包含 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

里面有個(gè)plugins屬性是配置 PostCSS 插件的選項(xiàng)。
postcss是css的轉(zhuǎn)換工具，寫h5時(shí)經(jīng)常用這個(gè)。

    postcss: {plugins: {// 這個(gè)工具可以實(shí)現(xiàn)自動添加CSS3前綴"autoprefixer": {overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]},'postcss-pxtorem': {rootValue: 37.5, // 指定轉(zhuǎn)換倍率，我現(xiàn)在設(shè)置這個(gè)表示1rem=37.5px;propList: ['*'], // 屬性列表，表示你要把哪些css屬性的px轉(zhuǎn)換成rem，這個(gè)*表示所有mediaQuery: false, // 是否允許使用媒體查詢，false媒體查詢的代碼可用，true不可用exclude: 'ignore',replace: true, // 替換包含rem的規(guī)則，而不是添加回退minPixelValue: 1, // 需要轉(zhuǎn)換的最小值，一般1px像素不轉(zhuǎn)換，以上才轉(zhuǎn)換unitPrecision: 6, // 轉(zhuǎn)換成rem單位的小數(shù)點(diǎn)后的保留位數(shù)selectorBalckList: ["van"], // 匹配不被轉(zhuǎn)換為rem的選擇器},},},

modules

模塊是 Nuxt 擴(kuò)展模塊。
每個(gè)模塊既可以是一個(gè)字符串（可以指一個(gè)軟件包，也可以是一個(gè)文件的路徑），也可以是一個(gè)元組（第一個(gè)字符串是模塊，第二個(gè)對象是選項(xiàng)），還可以是一個(gè)內(nèi)聯(lián)模塊函數(shù)。Nuxt 會嘗試使用 node require path（在 node_modules 中）解析模塊數(shù)組中的每個(gè)項(xiàng)目，如果使用 ~ alias，則會從項(xiàng)目 srcDir 解析。

模塊是按順序執(zhí)行的，因此順序很重要。

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

devServer

項(xiàng)目的開發(fā)服務(wù)配置，和vite、webpack類似。

host

服務(wù)監(jiān)聽地址。

https

是否啟用 HTTPS。

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

port

服務(wù)監(jiān)聽端口。

nitro

nitro配置，是一個(gè)對象。nuxt3的開發(fā)服務(wù)是基于nitro實(shí)現(xiàn)的。
這里可以配置跨域代理。

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

build

共享的打包構(gòu)建配置。
默認(rèn)是vite打包，所以這個(gè)不用特別設(shè)置。

ssr

是否開啟ssr，默認(rèn)為true。

typescript

配置 Nuxt 的 TypeScript 集成。
建議不改動，默認(rèn)設(shè)置就挺好。
示例：
關(guān)閉構(gòu)建類型檢查,類型補(bǔ)充提示使用編輯器的插件：

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

vite

將直接傳遞給 Vite 的配置。
支持mode、clearScreen、esbuild、optimizeDeps、resolve等。

vue

vue的配置項(xiàng)。

compilerOptions

相當(dāng)于app.config.compilerOptions

webpack

webpack的配置。

extensions

應(yīng)由 Nuxt 解析器解析的擴(kuò)展名。

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

extends

從多個(gè)本地或遠(yuǎn)程來源擴(kuò)展配置文件（個(gè)人理解）。
值應(yīng)該是一個(gè)字符串或字符串?dāng)?shù)組，指向源目錄或相對于當(dāng)前配置的配置路徑。

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

官網(wǎng)上意思好像是擴(kuò)展項(xiàng)目用的，也沒給示例，我理解不到具體應(yīng)用場景，所以我當(dāng)擴(kuò)展配置文件來使用。

示例

// 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},//  這些樣式表將內(nèi)聯(lián)到 Nuxt 渲染的 HTML 中，全局注入并出現(xiàn)在所有頁面中。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, //  自動導(dǎo)入//   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>) 

結(jié)語

nuxt3由于可以是全棧的嘛，配置文件屬性太多了，而且有的配置方法不只一種，所以配置詳情請到官網(wǎng)查看，這里僅供參考。