Vuepress 2.0.0-beta.22版本本地搜索插件不显示问题求助

• 第一步：修复插件版本不匹配问题
  你之前遇到的@vuepress/shared-utils等依赖缺失提示，本质是安装了Vuepress 1.x版本的搜索插件，和你使用的Vuepress 2.x核心不兼容。首先卸载错误版本的插件，再安装和你的Vuepress核心版本完全一致的搜索插件：

# 卸载旧插件
npm uninstall @vuepress/plugin-search
# 安装对应版本的插件，替换为你的vuepress核心的实际版本号即可
npm install -D @vuepress/plugin-search@2.x.x

• 第二步：修正配置写法
  Vuepress 2的插件配置推荐用导入插件函数的写法，不要用字符串注册，完整配置参考如下：

// ./docs/.vuepress/config.ts
import { defineUserConfig } from 'vuepress'
import { searchPlugin } from '@vuepress/plugin-search'

export default defineUserConfig({
  // 你的其他站点配置...
  plugins: [
    searchPlugin({
      searchMaxSuggestions: 10
    })
  ],
  // 如果你用的是默认主题，确保显式开启搜索功能
  themeConfig: {
    search: true
  }
})

• 第三步：排查自定义导航栏冲突
  如果你自己开发了自定义navbar组件，默认的搜索框不会自动注入，需要你手动在自定义导航栏组件中引入并渲染搜索组件：

<!-- 你的自定义navbar组件 -->
<script setup>
import { SearchBox } from '@vuepress/plugin-search/client'
</script>
<template>
  <div class="navbar">
    <!-- 你的其他导航栏内容 -->
    <SearchBox />
  </div>
</template>

• 第四步：清空缓存重启服务
  配置修改后不要直接用热重载加载，执行命令清空缓存重启服务即可生效：

vuepress dev docs --clean-cache
# 如果缓存还是没清，直接删除node_modules/.cache文件夹再重启服务

走完以上步骤即可正常显示本地搜索框，无需依赖Algolia服务。

内容的提问来源于stack exchange，提问作者Ahmed Ayoub