简言
记录下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由于可以是全栈的嘛,配置文件属性太多了,而且有的配置方法不只一种,所以配置详情请到官网查看,这里仅供参考。
标签:配置文件,配置,Nut3,plugins,Nuxt,config,css,nuxt From: https://blog.csdn.net/qq_43231248/article/details/136701437