乐闻世界logo
搜索文章和话题

服务端面试题手册

Elasticsearch 的字段类型有哪些,如何选择合适的字段类型?

Elasticsearch 作为分布式搜索和分析引擎,其字段类型设计直接影响索引性能、查询效率和数据准确性。在构建索引时,错误的字段类型选择可能导致分词错误、聚合失败或存储浪费。本文将系统解析 Elasticsearch 的核心字段类型,并提供基于实际场景的选型指南,帮助开发者构建高效、可靠的搜索应用。1. Elasticsearch 字段类型概述Elasticsearch 字段类型定义数据的存储和处理逻辑。每个字段必须显式声明类型,否则会默认使用 text 类型。类型选择需考虑数据用途、查询需求和分析场景,避免常见误区。以下是核心类型分类:1.1 常见字段类型Elasticsearch 提供丰富的内置类型,主要分为以下类别:核心文本类型:text(全文搜索)和 keyword(精确匹配)是基础,用于处理文本数据。数值类型:integer、long、float、double 用于数字运算。布尔类型:boolean 用于二元值。日期时间类型:date 用于时间序列分析。特殊类型:ip(IP地址)、object(嵌套对象)、nested(复杂嵌套结构)等。 注意:Elasticsearch 8.0+ 默认使用 text 和 keyword 的组合模式(如 text 字段隐含 keyword 子字段),但显式声明可优化性能。1.2 每种类型详解Text 类型用途:全文搜索,如搜索文章标题或内容。特点:自动分词,支持分析查询(如 match),但不支持精确匹配。示例:"title": { "type": "text", "analyzer": "standard"}实践建议:仅用于需要分词的场景。避免在 text 字段上执行 term 查询,会导致分词错误。Keyword 类型用途:精确匹配,如过滤状态或聚合标签。特点:不分词,保持原始值,支持 term 查询和聚合。示例:"status": { "type": "keyword", "ignore_above": 256}实践建议:对于需要精确匹配的字段(如状态码),必须使用 keyword。例如:"user_id": { "type": "keyword"}避免使用 text 字段进行 user_id 查询。数值类型integer/long:整数,如 age。float/double:浮点数,如 price。示例:"price": { "type": "float", "format": "currency"}实践建议:数值字段应指定精度(如 float 用于货币)。避免在 text 字段中存储数值。Date 类型用途:日期时间,如日志时间戳。特点:自动解析日期字符串,支持时间范围查询。示例:"created_at": { "type": "date", "format": "yyyy-MM-dd'T'HH:mm:ss.SSSZ"}实践建议:指定 format 避免解析错误。例如,"created_at" 字段应使用 date 类型,而非 text。IP 类型用途:IP 地址,如用户访问来源。特点:自动解析 IP 地址,支持网络范围查询。示例:"ip_address": { "type": "ip"}实践建议:仅用于 IP 地址字段。避免使用 text 进行 IP 过滤,会导致性能下降。Nested 类型用途:处理数组中的嵌套对象,如产品标签。特点:避免扁平化,支持独立查询。示例:"tags": { "type": "nested", "properties": { "name": { "type": "keyword" } }}实践建议:当需要对数组元素独立查询时使用。例如:"tags": { "type": "nested", "properties": { "tag_name": { "type": "keyword" } }}避免使用 object 类型,会导致扁平化错误。1.3 如何选择合适的字段类型选择字段类型需遵循以下原则,结合实际场景分析:查询需求优先:全文搜索:使用 text 类型(如 title 字段)。精确匹配:使用 keyword 类型(如 status 字段)。数值范围:使用数值类型(如 price 字段)。日期过滤:使用 date 类型(如 created_at 字段)。分析需求考量:聚合操作:优先使用 keyword 或 date 类型。例如,对 status 字段聚合时,必须使用 keyword。文本分析:如果需要分词,则用 text;如果需要保持原始值,则用 keyword。存储效率优化:text 类型占用更多存储(分词后),适合大文本;keyword 类型更小,适合小值字段。对于高频查询字段,优先使用 keyword 以减少索引开销。避免常见错误:错误示例:在 text 字段上执行 term 查询。"query": { "term": { "title": { "value": "Elasticsearch" } }}会导致分词错误,结果为空。正确做法:为 title 字段添加 keyword 子字段,或使用 text 字段配合 match 查询。代码示例:索引映射设计以下是一个实际索引映射示例,展示混合类型字段的正确选择:{ "mappings": { "properties": { "title": { "type": "text", "analyzer": "ik_max_word" }, "status": { "type": "keyword", "ignore_above": 256 }, "price": { "type": "float", "ignore_malformed": true }, "is_active": { "type": "boolean" }, "created_at": { "type": "date", "format": "yyyy-MM-dd'T'HH:mm:ss.SSSZ" }, "ip_address": { "type": "ip" }, "user": { "type": "object", "properties": { "name": { "type": "text" }, "email": { "type": "keyword" } } }, "tags": { "type": "nested", "properties": { "name": { "type": "keyword" } } } } }}实践建议:文本字段:如果需要全文搜索和精确匹配,同时定义 text 和 keyword。例如:"title": { "type": "text", "fields": { "keyword": { "type": "keyword" } }}日期字段:指定 format 避免解析问题。例如:"created_at": { "type": "date", "format": "yyyy-MM-dd"}数值字段:使用 ignore_malformed 处理无效值。例如:"price": { "type": "float", "ignore_malformed": true}性能优化:对于高频查询字段,优先使用 keyword 类型减少分词开销。结论Elasticsearch 字段类型的选择是构建高效搜索应用的基石。通过正确匹配 text 与 keyword、数值类型与日期类型,可以显著提升查询性能、减少资源消耗,并确保数据准确分析。建议在设计索引时:仔细分析查询需求,避免常见错误(如在 text 字段上执行精确匹配)。参考 Elasticsearch官方文档 获取最新类型规范。使用 keyword 类型处理精确匹配和聚合操作。记住:字段类型不是一成不变的,可以根据业务需求动态调整。通过实践和监控,持续优化索引设计,才能充分发挥 Elasticsearch 的潜力。
阅读 0·3月6日 23:16

Elasticsearch 集群架构中分片和副本的作用是什么?

Elasticsearch 作为分布式搜索与分析引擎,其核心优势源于集群架构的高扩展性与可靠性。在构建大规模数据处理系统时,分片(shard) 和 副本(replica) 是集群设计的基石。它们不仅决定数据的存储效率,还直接影响查询性能、故障恢复能力和数据安全性。本文将深入解析分片和副本的作用机制,结合实际配置示例与最佳实践,帮助开发者在生产环境中高效应用这些概念。1. 分片的作用:数据分片与并行处理分片是将单个索引(index)逻辑分割成多个独立部分的过程。每个分片是一个包含 Lucene 索引的独立文件存储单元,可分布在集群的不同节点上。其核心作用体现在以下方面:水平扩展数据存储:当数据量超过单节点处理能力时,分片允许数据分散到多个节点。例如,一个包含 10GB 数据的索引若设置 number_of_shards=5,则数据被均匀分割为 5 个分片,每个分片存储约 2GB 数据,避免单节点过载。提升查询并行度:分片使查询操作可并行执行。在分布式搜索中,客户端会将查询分发到所有分片,各分片独立处理后,结果聚合返回。这显著加速了大规模数据检索(如 match 查询),尤其在跨节点查询时效率提升 5-10 倍。资源隔离与负载均衡:分片机制确保数据均匀分布。若集群有 3 个节点,每个节点可持有多个分片,避免单节点资源耗尽。例如,设置 number_of_shards=3 可使每个节点存储 1 个分片,实现负载均衡。 关键注意事项:分片数量应基于数据量和节点数预设。若索引数据量较小(如\<10GB),设置过多分片可能导致元数据开销过大,降低性能。官方建议:分片数量 ≥10 时需谨慎,避免碎片化。​
阅读 0·3月6日 23:15

Nuxt.js 的布局系统是如何工作的?如何创建和使用自定义布局?

Nuxt.js 提供了强大的布局系统,允许开发者为应用程序创建可重用的布局组件,提高代码复用性和一致性。布局系统工作原理:默认布局Nuxt.js 默认使用 layouts/default.vue 作为应用的主布局所有页面组件默认使用此布局,除非指定了其他布局布局文件结构布局文件存放在 layouts 目录中每个布局文件都是一个 Vue 组件,必须包含 <nuxt /> 组件来显示页面内容布局使用方式在页面组件中通过 layout 属性指定使用的布局布局组件会包裹页面组件,提供一致的页面结构创建和使用自定义布局:创建布局文件在 layouts 目录中创建新的布局文件,如 layouts/auth.vue布局文件必须包含 <nuxt /> 组件来显示页面内容基本布局结构<!-- layouts/auth.vue --><template> <div class="auth-layout"> <header>认证页面</header> <main> <nuxt /> </main> </div></template>在页面中使用布局<!-- pages/login.vue --><template> <div>登录页面内容</div></template><script>export default { layout: 'auth' // 指定使用 auth 布局}</script>布局的生命周期布局组件具有完整的 Vue 生命周期钩子布局组件的 fetch 方法会在页面的 fetch 方法之前执行布局组件可以访问 $route 对象,根据路由变化调整布局动态布局可以根据条件动态选择布局例如,根据用户权限显示不同的布局布局的高级用法:嵌套布局可以在布局中使用其他组件,实现复杂的布局结构可以通过组件的 layout 属性实现布局的嵌套布局过渡效果可以为布局添加过渡动画,提升用户体验使用 Vue 的 <transition> 组件包裹 <nuxt />布局中间件可以为布局添加中间件,处理权限验证等逻辑布局数据传递可以通过 props 或 $store 在布局和页面之间传递数据最佳实践:为不同类型的页面创建专门的布局(如认证页面、管理后台、前台页面)合理使用布局组件,减少代码重复保持布局结构简洁,避免过度嵌套利用布局的生命周期钩子处理全局逻辑为布局添加适当的过渡效果,提升用户体验注意事项:布局文件必须包含 <nuxt /> 组件,否则页面内容不会显示布局组件的名称应与文件名一致(不包括 .vue 扩展名)布局的 asyncData 方法不会被调用,应使用 fetch 方法获取数据
阅读 0·3月6日 23:14

Nuxt.js 中有哪些数据获取方法?它们的使用场景是什么?

Nuxt.js 提供了多种数据获取方法,用于在组件渲染前获取数据,确保数据在服务器端和客户端都能正确加载。主要数据获取方法:asyncData使用场景:页面组件,用于在页面渲染前获取数据特点:只在页面组件中可用在服务器端和客户端导航时都会执行返回的数据会合并到组件的 data 中无法访问 this(组件实例)使用示例:export default { async asyncData({ params, $axios }) { const data = await $axios.$get(`/api/users/${params.id}`) return { user: data } }}fetch使用场景:页面组件和布局组件,用于获取数据并更新状态特点:在服务器端和客户端都执行可以访问 this(组件实例)用于更新组件的状态,不返回数据可以与 $fetchState 配合使用,显示加载状态使用示例:export default { data() { return { users: [] } }, async fetch() { this.users = await this.$axios.$get('/api/users') }}middleware使用场景:在路由导航前执行,用于权限验证、数据预处理等特点:可以在全局、布局或页面级别使用按顺序执行多个中间件可以通过 context 对象访问路由信息和服务使用示例:// middleware/auth.jsexport default function({ store, redirect }) { if (!store.state.user) { return redirect('/login') }}validate使用场景:验证动态路由参数特点:只在页面组件中可用返回布尔值或 Promise,决定路由是否有效使用示例:export default { validate({ params }) { return /^\d+$/.test(params.id) }}数据获取方法的执行顺序:全局中间件布局中间件页面中间件页面的 validate 方法页面的 asyncData 方法布局的 fetch 方法页面的 fetch 方法最佳实践:asyncData:用于获取页面初始化所需的数据,适合 SEO 重要的内容fetch:用于获取非关键数据或需要在客户端更新的数据middleware:用于权限验证、路由重定向等逻辑validate:用于验证路由参数的有效性注意事项:asyncData 和 fetch 在服务器端和客户端都会执行,需要处理环境差异避免在 asyncData 中使用浏览器特有的 API合理使用缓存策略,减少重复请求处理数据获取失败的情况,提供错误处理机制
阅读 0·3月6日 23:13

Nuxt.js 是什么,它与普通 Vue 应用有什么区别?

Nuxt.js 是一个基于 Vue.js 的高级框架,专为构建服务器端渲染(SSR)应用、静态站点生成(SSG)和单页应用(SPA)而设计。它提供了一个完整的开发架构,简化了 Vue 应用的开发流程。与普通 Vue 应用的主要区别:服务器端渲染 (SSR)普通 Vue 应用:客户端渲染,搜索引擎爬虫可能无法完全索引页面内容Nuxt.js:默认支持服务器端渲染,提高 SEO 性能和首屏加载速度目录结构普通 Vue 应用:需要手动配置路由、状态管理等Nuxt.js:提供约定式目录结构,自动生成路由,简化开发构建工具普通 Vue 应用:使用 Vue CLI 构建Nuxt.js:内置优化的构建工具链,支持自动代码分割静态站点生成 (SSG)普通 Vue 应用:需要额外配置才能生成静态站点Nuxt.js:内置 nuxt generate 命令,轻松生成静态站点中间件支持普通 Vue 应用:需要手动实现路由守卫Nuxt.js:提供内置的中间件系统,简化权限控制和数据预处理模块系统普通 Vue 应用:需要手动集成第三方库Nuxt.js:提供模块化系统,可轻松集成各种功能模块Nuxt.js 的核心优势:SEO 友好:服务器端渲染使搜索引擎能够更好地索引页面内容性能优化:自动代码分割、预加载和缓存策略开发体验:约定式目录结构,减少配置复杂性灵活性:支持多种渲染模式(SSR、SSG、SPA)生态系统:丰富的模块和插件生态适用场景:需要良好 SEO 的网站(如企业官网、博客、电商平台)内容驱动的应用对首屏加载速度有较高要求的应用需要静态生成的网站
阅读 0·3月6日 23:13

Nuxt.js 的模块系统和插件系统有什么区别?如何使用它们?

Nuxt.js 提供了模块系统和插件系统两种扩展机制,用于增强应用功能和集成第三方库。模块系统:概念模块是 Nuxt.js 的核心扩展机制,用于向 Nuxt 应用添加新功能或集成第三方服务模块会在 Nuxt 构建过程中执行,可以修改 Nuxt 配置、添加新的构建步骤等特点模块执行时机早,在 Nuxt 初始化阶段执行可以访问和修改 Nuxt 配置可以添加新的构建步骤和 webpack 配置可以注册服务器端路由和中间件常用模块@nuxtjs/axios:集成 axios 用于 HTTP 请求@nuxtjs/auth:提供认证功能@nuxtjs/i18n:国际化支持@nuxtjs/pwa:渐进式 Web 应用支持使用模块安装模块:npm install @nuxtjs/axios在 nuxt.config.js 中配置:modules: [ '@nuxtjs/axios'],axios: { // 配置选项}插件系统:概念插件用于在 Vue 应用实例化之前或之后执行代码主要用于注册全局组件、指令、过滤器,或添加 Vue 实例方法特点插件执行时机较晚,在 Vue 应用实例化前后执行可以访问 Vue 实例和 Nuxt 上下文可以注册全局功能,但不能修改 Nuxt 配置插件类型客户端插件:只在客户端执行服务器端插件:只在服务器端执行通用插件:在客户端和服务器端都执行创建和使用插件在 plugins 目录中创建插件文件,如 plugins/vuex-persist.js基本插件结构:// plugins/vuex-persist.jsexport default ({ store }) => { // 插件逻辑}在 nuxt.config.js 中配置:plugins: [ '~/plugins/vuex-persist.js']模块与插件的主要区别:| 特性 | 模块 | 插件 || ---- | ------------------- | --------------------- || 执行时机 | 构建阶段,Nuxt 初始化时 | 运行时,Vue 实例化前后 || 功能范围 | 可以修改 Nuxt 配置,添加构建步骤 | 只能注册全局功能,不能修改配置 || 访问权限 | 可以访问 Nuxt 配置和构建工具 | 可以访问 Vue 实例和 Nuxt 上下文 || 适用场景 | 集成第三方服务,添加新功能 | 注册全局组件、指令、过滤器 |最佳实践:模块使用:用于集成需要修改构建配置的第三方库用于添加新的构建步骤或服务器端功能插件使用:用于注册全局组件、指令、过滤器用于添加 Vue 实例方法或全局属性用于初始化第三方库(如图表库、地图库等)命名规范:模块名使用 kebab-case(如 @nuxtjs/axios)插件文件使用 camelCase 或 kebab-case(如 vuex-persist.js)性能考虑:只加载必要的模块和插件对于大型插件,考虑使用懒加载合理使用插件的执行时机(客户端/服务器端)注意事项:模块和插件的执行顺序很重要,应在配置中合理安排避免在插件中执行耗时操作,影响应用启动速度注意插件在客户端和服务器端的执行差异,避免使用环境特有的 API
阅读 0·3月6日 23:12

Nuxt.js 中如何进行状态管理?有哪些推荐的状态管理方案?

在 Nuxt.js 应用中,状态管理是一个重要的部分,用于管理应用的全局状态。以下是 Nuxt.js 中常用的状态管理方案。内置状态管理:VuexNuxt.js 内置了 Vuex,无需额外安装可以在 store 目录中创建模块来组织状态支持服务器端和客户端的状态同步Store 目录结构store/index.js:主 store 文件store/modules/:模块化的状态管理每个模块文件会自动注册为 Vuex 模块nuxtServerInit特殊的 action,只在服务器端执行用于初始化全局状态,如用户信息示例:// store/index.jsexport const actions = {nuxtServerInit({ commit }, { req }) {if (req.session.user) {commit('user/SET_USER', req.session.user)}}}```状态管理方案:Vuex适用场景:复杂应用,需要集中管理多个组件的状态优势:成熟稳定,官方支持,功能完善示例:// store/modules/user.jsexport const state = () => ({user: null})export const mutations = {SET_USER(state, user) {state.user = user}}export const actions = {async login({ commit }, credentials) {const user = await this.$axios.$post('/api/login', credentials)commit('SET_USER', user)return user}}```Pinia适用场景:现代 Vue 3 应用,需要更简洁的状态管理优势:Vue 3 官方推荐,API 更简洁,支持 TypeScript使用方法:安装:npm install pinia @pinia/nuxt配置:在 nuxt.config.js 中添加模块创建 store:// store/user.jsimport { defineStore } from 'pinia'export const useUserStore = defineStore('user', { state: () => ({ user: null }), actions: { async login(credentials) { const user = await this.$axios.$post('/api/login', credentials) this.user = user return user } }})组合式 API适用场景:小型应用,状态管理需求简单优势:无需额外依赖,使用 Vue 3 组合式 API示例:// composables/useUser.jsimport { ref, useContext } from '@nuxtjs/composition-api'export function useUser() { const { $axios } = useContext() const user = ref(null) const login = async (credentials) => { user.value = await $axios.$post('/api/login', credentials) return user.value } return { user, login }}本地存储适用场景:需要持久化的状态,如用户偏好设置优势:简单易用,数据持久化示例:// store/modules/settings.jsexport const state = () => ({theme: localStorage.getItem('theme') || 'light'})export const mutations = {SET_THEME(state, theme) {state.theme = themelocalStorage.setItem('theme', theme)}}```状态管理最佳实践:模块化将状态按功能模块划分每个模块负责特定领域的状态命名规范状态名使用 camelCasemutation 名使用大写蛇形命名(如 SET_USER)action 名使用 camelCase异步操作在 action 中处理异步操作mutation 应该是同步的状态持久化对于需要持久化的状态,使用 localStorage 或 sessionStorage考虑使用 vuex-persist 等库性能优化使用 mapState、mapGetters 等辅助函数合理使用 computed 缓存计算结果避免在 mutation 中执行复杂逻辑服务器端状态同步使用 nuxtServerInit 同步服务器端状态注意服务器端和客户端的状态一致性注意事项:避免过度使用状态管理,只管理真正需要全局共享的状态合理设计状态结构,避免深层嵌套注意状态更新的性能影响,特别是在大型应用中测试状态管理逻辑,确保状态更新正确选择合适的状态管理方案:| 方案 | 适用场景 | 优势 | 劣势 || ------- | ------------- | -------------------- | -------------- || Vuex | 复杂应用,需要集中管理状态 | 成熟稳定,功能完善 | 配置复杂,代码冗余 || Pinia | 现代 Vue 3 应用 | API 简洁,支持 TypeScript | 需要额外安装 || 组合式 API | 小型应用,状态管理需求简单 | 无需额外依赖,使用灵活 | 不适合复杂状态管理 || 本地存储 | 需要持久化的状态 | 简单易用,数据持久化 | 存储容量有限,不适合复杂状态 |​
阅读 0·3月6日 23:12

Nuxt.js 的路由系统是如何工作的?与 Vue Router 有什么不同?

Nuxt.js 内置了基于文件系统的路由系统,它是对 Vue Router 的封装和扩展,提供了更简洁的路由定义方式。路由系统工作原理:约定式路由Nuxt.js 会自动扫描 pages 目录下的文件结构,根据文件路径生成对应的路由配置无需手动配置 router.js 文件,减少了配置复杂度文件命名规则基础路由:pages/index.vue 对应 / 路径嵌套路由:pages/user/profile.vue 对应 /user/profile 路径动态路由:使用下划线前缀,如 pages/user/_id.vue 对应 /user/:id 路径嵌套动态路由:如 pages/user/_id/comments.vue 对应 /user/:id/comments 路径路由参数获取在组件中通过 $route.params 获取路由参数支持通过 validate 方法验证路由参数路由导航使用 <nuxt-link> 组件进行声明式导航使用 this.$router.push() 进行编程式导航与 Vue Router 的主要区别:路由生成方式Vue Router:需要手动配置路由规则Nuxt.js:基于文件系统自动生成路由路由文件结构Vue Router:通常集中在一个 router.js 文件中Nuxt.js:分散在 pages 目录的文件结构中布局系统Vue Router:需要手动配置布局组件Nuxt.js:内置布局系统,通过 layouts 目录管理中间件支持Vue Router:使用路由守卫Nuxt.js:提供更强大的中间件系统,支持全局、布局和页面级中间件预加载功能Nuxt.js 提供路由预加载功能,提升用户体验高级路由特性:嵌套路由创建与父组件同名的目录,并在其中添加 _slug.vue 等文件动态路由使用 _ 前缀创建动态路由参数支持通过 validate 方法验证参数格式路由过渡效果内置支持页面过渡动画路由元信息通过组件的 head 方法设置页面标题、描述等元信息最佳实践:合理组织 pages 目录结构,保持路由逻辑清晰使用动态路由时,添加参数验证利用中间件处理权限验证等通用逻辑合理使用布局组件,减少代码重复
阅读 0·3月6日 23:12

Nuxt.js 的静态站点生成(SSG)是如何工作的?与服务器端渲染(SSR)有什么区别?

Nuxt.js 提供了强大的静态站点生成功能,允许开发者将应用预渲染为静态 HTML 文件,提高性能和 SEO。静态站点生成(SSG)工作原理:构建过程使用 nuxt generate 命令触发静态站点生成Nuxt.js 会遍历所有路由,为每个路由生成对应的 HTML 文件同时生成必要的 JavaScript 和 CSS 文件数据获取在生成过程中,会执行每个页面的 asyncData 和 fetch 方法获取的数据会被注入到生成的 HTML 文件中生成的页面包含完整的内容,无需客户端再获取数据生成产物生成的静态文件存放在 dist 目录中包括 HTML 文件、JavaScript 包、CSS 文件等可以部署到任何静态文件服务器上动态内容处理对于需要动态内容的页面,可以使用客户端数据获取可以使用 nuxtServerInit 或其他方法处理动态数据SSG 与 SSR 的主要区别:| 特性 | 静态站点生成(SSG) | 服务器端渲染(SSR) || ---- | --------------- | -------------- || 构建时机 | 构建时生成静态文件 | 请求时动态渲染 || 部署环境 | 任何静态文件服务器 | 需要 Node.js 服务器 || 性能 | 加载速度快,无需服务器处理 | 每次请求都需要服务器渲染 || SEO | 优秀,静态 HTML 易于索引 | 优秀,服务器渲染内容易于索引 || 适用场景 | 内容变化不频繁的网站 | 内容频繁变化的应用 || 成本 | 部署成本低 | 需要服务器运行成本 |SSG 的优势:性能优异静态文件加载速度快,无需服务器处理可以利用 CDN 加速分发首屏加载时间短,用户体验好部署简单可以部署到任何静态文件服务器支持 Netlify、Vercel 等静态托管服务无需维护 Node.js 服务器SEO 友好静态 HTML 文件包含完整内容,易于被搜索引擎索引页面加载速度快,有利于搜索排名安全性高静态文件不存在服务器端代码执行风险减少了攻击面最佳实践:内容类型适合内容变化不频繁的网站,如博客、企业官网、文档站点不适合实时数据要求高的应用,如实时聊天、动态仪表板数据获取使用 asyncData 和 fetch 方法在构建时获取数据对于动态内容,考虑使用客户端数据获取路由处理确保所有动态路由在构建时被正确生成使用 generate.routes 配置处理动态路由缓存策略合理设置静态文件缓存策略对于频繁变化的内容,考虑使用客户端数据获取注意事项:静态站点生成需要在构建时获取所有页面的数据对于大型网站,构建时间可能较长动态路由需要在配置中明确指定,否则可能不会被生成实时数据需要通过客户端 API 调用获取示例配置:// nuxt.config.jsexport default { generate: { routes: [ '/users/1', '/users/2', '/posts/1', // 可以通过函数动态生成路由 ...Array.from({ length: 10 }, (_, i) => `/products/${i + 1}`) ] }}​
阅读 0·3月6日 23:11