nuxt 配置

张

张建站

2026/4/8 8:29:48

10分钟阅读

// https://nuxt.com/docs/api/configuration/nuxt-config/** * Nuxt.js 配置文件 * 用于配置整个 Nuxt 应用的行为和特性 */exportdefaultdefineNuxtConfig({/** * 运行时配置 * - 私有配置如 apiSecret仅在服务端可用 * - 公共配置public 下的会在客户端和服务端都可用 */runtimeConfig:{apiSecret:123,public:{apiBase:import.meta.env.NODE_ENVdevelopment?/api:/,},},/** * 兼容性日期 * 用于确保 Nuxt 在不同版本间的行为一致性 * 防止因框架升级导致的破坏性变更 */compatibilityDate:2024-1-1,/** * 开发者工具配置 * enabled: false 表示禁用 Nuxt DevTools */devtools:{enabled:false},/** * 应用配置 * 包含布局过渡、HTML head 头部信息等 */app:{/** * 布局过渡动画配置 * name: layout - 过渡动画的 CSS 类名前缀 * mode: out-in - 先退出再进入的过渡模式 */layoutTransition:{name:layout,mode:out-in},/** * HTML head 配置 * 设置网页标题、meta 标签、favicon 等 */head:{title:大赛,meta:[{name:viewport,content:width1450},{name:keywords,content:大赛,},{name:description,content:大赛,},],link:[{rel:icon,type:image/x-icon,href:/favicon.ico}],},},/** * 全局 CSS 配置 * 引入全局样式文件 */css:[~/assets/scss/index.scss],/** * 实验性功能配置 * 开启或关闭 Nuxt 的实验性特性 */experimental:{payloadExtraction:false,renderJsonPayloads:true,typedPages:true,},/** * Nitro 服务端引擎配置 * Nitro 是 Nuxt 3 的服务端引擎 */nitro:{/** * 开发环境代理配置 * 将 /api 请求代理到后端服务器 */devProxy:{/api:{target:https://www.123.com,prependPath:true,changeOrigin:true,},},/** * esbuild 配置 * 设置构建目标为最新 ECMAScript 标准 */esbuild:{options:{target:esnext,},},/** * 预渲染配置 * crawlLinks: true - 自动爬取页面链接进行预渲染 */prerender:{crawlLinks:true,},},/** * PostCSS 配置 * autoprefixer: 自动添加 CSS 浏览器前缀 */postcss:{plugins:{autoprefixer:{},},},/** * VueUse 配置 * ssrHandlers: true - 启用服务端渲染处理器 */vueuse:{ssrHandlers:true,},/** * Nuxt 模块配置 * 扩展 Nuxt 核心功能的插件 */modules:[vueuse/nuxt,nuxt-icons,element-plus/nuxt,[pinia/nuxt,{autoImports:[defineStore,storeToRefs],},],nuxt/eslint,vueuse/nuxt,nuxtjs/robots,nuxtjs/sitemap,],/** * 网站信息配置 * 用于 SEO 和 sitemap 生成 */site:{url:https://www.123.com,name:比赛,},/** * Sitemap 配置 * 自动生成网站地图提升 SEO */sitemap:{sitemaps:true,autoLastmod:true,exclude:[/admin/**,/dashboard/**,/api/**,/_nuxt/**],},/** * Vite 构建工具配置 * Nuxt 3 使用 Vite 作为默认构建工具 */vite:{/** * CSS 预处理器配置 */css:{preprocessorMaxWorkers:true,preprocessorOptions:{scss:{additionalData:use /assets/scss/element/index.scss as element;,},},},/** * Vite 插件配置 * 自定义插件用于处理 nuxt-icons 模块的导入方式 */plugins:[{name:vite-plugin-glob-transform,transform(code:string,id:string){if(id.includes(nuxt-icons)){return{code:code.replace(/as:\s*[]raw[]/g,query: ?raw, import: default,),map:null,}}returnnull},},],},})request 请求自动注册composables 里的文件抛出的方法所以在请求文件中可以使用useRequest例如如下exportfunctionapitest(data?:any){returnuseRequest.get(/api-test,data)}$fetch 是next自己封装的所以不需要引入import{ElMessage}fromelement-plusfunctionhandleError(response:any){// const router useRouter()// const route useRoute()// if (!response._data) {// ElMessage.error(请求超时服务器无响应)// return// }switch(response.status){case400:ElMessage.error(参数错误)breakcase401:ElMessage.error(登录状态已过期需要重新登录)// router.push(/login?callback${route.path})breakcase403:ElMessage.error(当前操作没有权限)breakcase404:ElMessage.error(服务器资源不存在)breakcase500:ElMessage.error(服务器内部错误)breakdefault:ElMessage.error(${response?._data?.message??系统未知错误请反馈给管理员})break}}constrequest$fetch.create({timeout:10000,// Timeout after 10 seconds// 请求拦截器onRequest({request,options}){// console.log([fetch request], request, options)// 添加baseURL,nuxt3环境变量要从useRuntimeConfig里面取const{public:{apiBase}}useRuntimeConfig()options.baseURLapiBase options.queryoptions.query||{}options.query.tnewDate()options.headers.set(Content-Type,application/json;charsetutf-8)consttokenuseCookie(token)if(token){// options.headers.set(Authorization, Bearer ${token})}},onRequestError({request,error}){// console.log([fetch request error], request, error)ElMessage.error(请求出错请重试)},// 响应拦截onResponse({response}){// console.log([fetch response], response)if(response.headers.get(content-disposition)response.status200)returnresponse// 在这里判断错误// if (response._data.code ! 200) {// handleError(response)// return Promise.reject(response._data)// }// 成功返回returnresponse._data},// 错误处理onResponseError({response}){// console.log([fetch response error], response)handleError(response)returnPromise.reject(response?._data??null)},})exportconstuseRequest{get:(url:string,params?:any,options?:any){returnrequest(url,{method:get,params,...options})},post:(url:string,body?:any,options?:any){returnrequest(url,{method:post,body,...options})},}