您的位置:首页 > 房产 > 建筑 > Nuxt3【项目配置】nuxt.config.ts

Nuxt3【项目配置】nuxt.config.ts

2024/12/23 7:51:02 来源:https://blog.csdn.net/weixin_41192489/article/details/141258957  浏览:    关键词:Nuxt3【项目配置】nuxt.config.ts

按环境添加配置

export default defineNuxtConfig({// 生产环境的配置$production: {routeRules: {'/**': { isr: true }}},// 开发环境的配置$development: {//}
})

运行时的配置 runtimeConfig

export default defineNuxtConfig({runtimeConfig: {// 只在服务器端可用的私有键apiSecret: '123',// public中的键也可以在客户端使用public: {apiBase: '/api'}}
})
  • 默认情况下,这些键只在服务器端可用。
  • runtimeConfig.public 中的键也可以在客户端使用

页面中通过useRuntimeConfig()组合函数获取运行时的配置

const runtimeConfig = useRuntimeConfig()

模块 modules

export default defineNuxtConfig({modules: [// 使用包名(推荐用法)'@nuxtjs/example',// 加载本地模块'./modules/example',// 添加带有内联选项的模块['./modules/example', { token: '123' }]// 内联模块定义async (inlineOptions, nuxt) => { }]
})

别名 alias

手动将库别名为CJS版本

export default defineNuxtConfig({alias: {'sample-library': 'sample-library/dist/sample-library.cjs.js'}
})

组件 components

自定义自动导入的组件目录

  • ~/components 要写在末尾
  • pathPrefix 配置导入组件时,是否包含组件的目录(默认包含)
  • prefix 可自定义导入组件时的前缀

最终效果详见下方代码中的注释

export default defineNuxtConfig({components: [// ~/calendar-module/components/event/Update.vue => <EventUpdate />{ path: '~/calendar-module/components' },// ~/user-module/components/account/UserDeleteDialog.vue => <UserDeleteDialog />{ path: '~/user-module/components', pathPrefix: false },// ~/components/special-components/Btn.vue => <SpecialBtn />{ path: '~/components/special-components', prefix: 'Special' },// 如果您想要覆盖 `~/components` 的子目录,请确保它是最后一个。//// ~/components/Btn.vue => <Btn />// ~/components/base/Btn.vue => <BaseBtn />'~/components']
})

禁用自动导入组件

export default defineNuxtConfig({components: {dirs: []}
})

导入 imports

配置自动导入自定义文件夹或第三方包导出的函数。

imports: {// 自动导入 stores 文件夹中的 pinia stores dirs: ['stores']
}

自动导入第三方包

范例:启用从vue-i18n包中自动导入useI18n组合式函数

  imports: {presets: [{from: 'vue-i18n',imports: ['useI18n']}]}

禁用自动导入组合式函数和实用函数

export default defineNuxtConfig({imports: {autoImport: false}
})

渲染模式 ssr

启用仅客户端渲染

ssr: false

此时应该在 /app/spa-loading-template.html 中放置一个HTML文件,其中包含你想要用于渲染加载屏幕的HTML。

路由规则 routeRules

可按路由配置不同的渲染模式

export default defineNuxtConfig({routeRules: {// 主页在构建时预渲染'/': { prerender: true },// 产品页面按需生成,后台自动重新验证'/products/**': { swr: 3600 },// 博客文章按需生成,直到下一次部署前持续有效'/blog/**': { isr: true },// 管理仪表板仅在客户端渲染'/admin/**': { ssr: false },// 在API路由上添加cors头'/api/**': { cors: true },// 跳转旧的URL'/old-page': { redirect: '/new-page' }}
})

具体的配置项有:

  • redirect: string - 定义服务器端重定向。
  • ssr: boolean - 禁用应用程序的服务器端渲染部分,使其仅支持SPA,使用ssr: false。
  • cors: boolean - 使用cors: true自动添加CORS头部,你可以通过覆盖headers来自定义输出。
  • headers: object - 为你的站点的某些部分添加特定的头部,例如你的资源文件。
  • swr: number|boolean - 为服务器响应添加缓存头部,并在服务器或反向代理上缓存它,以配置的TTL(存活时间)进行缓存。Nitro的node-server预设能够缓存完整的响应。当TTL过期时,将发送缓存的响应,同时在后台重新生成页面。如果使用true,则添加了一个不带MaxAge的stale-while-revalidate头部。
  • isr: number|boolean - 行为与swr相同,除了我们能够将响应添加到支持此功能的CDN缓存中(目前支持Netlify或Vercel)。如果使用true,内容将在CDN中持久存在,直到下一次部署。
  • prerender:boolean - 在构建时预渲染路由,并将其包含在你的构建中作为静态资源。
  • experimentalNoScripts: boolean - 禁用Nuxt脚本的渲染和JS资源提示,用于你站点的某些部分。

构建 build

转译库

export default defineNuxtConfig({build: {transpile: ['sample-library']}
})

类型检查 typescript

构建时启用类型检查

export default defineNuxtConfig({typescript: {typeCheck: true}
})

启用严格的类型检查

export default defineNuxtConfig({typescript: {strict: true}
})

添加 vite 配置

export default defineNuxtConfig({vite: {vue: {customElement: true},vueJsx: {mergeProps: true}}
})

完整的 vue 配置项见 https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue

完整的 vueJsx 配置项见 https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx

添加 webpack 配置

export default defineNuxtConfig({webpack: {loaders: {vue: {hotReload: true,}}}
})

详见 https://www.nuxt.com.cn/docs/api/nuxt-config#loaders

启用实验性 Vue 功能

export default defineNuxtConfig({vue: {defineModel: true,propsDestructure: true}
})

更多配置

见官网 https://www.nuxt.com.cn/docs/api/nuxt-config

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com