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
}
})