建设工程合同管理网站,成都房地产信息网,网页设计英语,网站建设总结按环境添加配置 export default defineNuxtConfig({// 生产环境的配置$production: {routeRules: {/**: { isr: true }}},// 开发环境的配置$development: {//}
})运行时的配置 runtimeConfig export default defineNuxtConfig({runtimeConfig: {// 只在服务器端可用的私有键ap… 按环境添加配置 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}
})
