网站开发商务合同,有做网站维护的,全球域名注册平台,中国建设很行河北省分行合作网站简言
记录下nuxt3的nuxt.config.ts文件的介绍和使用。 Nuxt Configuration
nuxt.config.ts
Nuxt可以通过一个单独的nuxt.config文件进行简单配置。
配置文件创建
nuxt.config文件的扩展名可以是.js、.ts或.mjs。 然后默认导出全局函数defineNuxtConfig的返回值#xff0c…简言
记录下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 { defineNuxtConfigNuxtConfig } from nuxt/config
import type { InputConfig, ConfigLayerMeta } from c12
export default defineNuxtConfig({// 我的Nuxt配置
} as InputConfigNuxtConfig, 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: widthdevice-width, initial-scale1},{charset: utf-8}],link: [],style: [],script: [],noscript: []
}
里面的只和html需要的属性值对应只不过你要转成对象形式例如
app: {head: {meta: [// meta nameviewport contentwidthdevice-width, initial-scale1{ name: viewport, content: widthdevice-width, initial-scale1 }],script: [// script srchttps://myawesome-lib.js/script{ src: https://awesome-lib.js }],link: [// link relstylesheet hrefhttps://myawesome-lib.css{ rel: stylesheet, href: https://awesome-lib.css }],// please note that this is an area that is likely to changestyle: [// style typetext/css:root { color: red }/style{ children: :root { color: red }, type: text/css }],noscript: [// noscriptJavaScript 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 its 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, // 指定转换倍率我现在设置这个表示1rem37.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 namenuxtjs/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 c12import { defineNuxtConfig, NuxtConfig, } from nuxt/config;
import { fileURLToPath } from node:urlexport 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 InputConfigNuxtConfig, ConfigLayerMeta)
结语
nuxt3由于可以是全栈的嘛配置文件属性太多了而且有的配置方法不只一种所以配置详情请到官网查看这里仅供参考。
