搜索功能

mingStudent2025/11/2大约 3 分钟

搜索功能

需求：可以根据文章标题、标签、摘要、正文搜索站点内文章

slimsearch

[!quote]
一个强大的客户端搜索插件，支持自定义搜索与全文搜索

关于客户端搜索：
服务端搜索：由服务器建立索引，客户端请求，然后由服务端返回结果。客户端搜索需要从服务器拉取整个索引，然后在本地进行解析。
缺点：

构建阶段服务器建立索引：增加部署时间与构建体积（索引文件）。这是和docsearch相比，docsearch 通过爬虫抓取页面内容，索引存储在服务商Algolia的云端上，搜索时客户端发起请求，由Algolia 返回结果。部署站点的服务器不存储索引。
客户端拉取索引：增加流量与带宽压力
客户端本地解析：增加客户端的运算，搜索的速度取决于客户端的计算能力

配置

安装

npm i -D @vuepress/plugin-slimsearch@next

提示报错：

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: vuepress-theme-hope-template@2.0.0
npm error Found: vuepress@2.0.0-rc.24
npm error node_modules/vuepress
npm error   dev vuepress@"2.0.0-rc.24" from the root project
npm error
npm error Could not resolve dependency:
npm error peer vuepress@"2.0.0-rc.26" from @vuepress/plugin-slimsearch@2.0.0-rc.118
npm error node_modules/@vuepress/plugin-slimsearch
npm error   dev @vuepress/plugin-slimsearch@"2.0.0-rc.118" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

行号	功能	说明
1	出错代码ERESOLVE
2	具体的错误类型：无法解决依赖关系
4	4-7描述问题出现的上下文	解析hope-template 包的依赖时发生错误
5		当前使用的vuepress版本为 rc.24
6		vuepress rc.24 安装路径
7		dev：devDependencies 开发依赖。表示vuepress 只存在于开发环境中，用于测试 the root project: 根项目 vuepress 是当前项目的一个开发依赖
10	错误的具体原因	peer：同级、对等。表示plugin 不会直接安装它所需要的依赖，而是由宿主（当前安装的环境）提供 `slimsearch` 依赖于`vuepress rc.26`
11		`slimsearch` 的安装路径
12		`slimsearch` 是根项目的开发依赖（plugin 的来源）
14-16	解决方案	解决上面的依赖冲突，或者使用以下选项进行安装： `--force`: 强制安装，根据`package.json`重新安装一遍，不会管`rc.24` 是否兼容 `--legacy-peer-deps`：跳过版本检查，使用现有依赖，然后安装新的plugin

尝试通过ncu更新，同样会报错：

[====================] 9/9 100%

 echarts                   ^5.6.0  →       ^6.0.0
 mermaid                  ^11.9.0  →     ^11.12.1
 sass-embedded            ^1.89.2  →      ^1.93.3
 vue                      ^3.5.17  →      ^3.5.22
 vuepress-theme-hope  2.0.0-rc.94  →  2.0.0-rc.98
TypeError [ERR_INVALID_ARG_TYPE]: The "paths[0]" argument must be of type string
. Received undefined
...

vuepress-theme-hope 升级了但是vuepress 没有升级

直接来硬的

npm i -D @vuepress/plugin-slimsearch@next --force

启用

thems.ts
  plugins: {
	//搜索
	slimsearch: {
	
	},
  },

运行
虽然还是会报错：

vuepress-theme-hope:  × You are not allowed to use plugin "@vuepress/plugin-slimsearch" yourself in vuepress config file
. Set "plugins.slimsearch" in theme options to customize it.

但是最终界面上是有搜索框的
效果：

问题

部署
部署的时候也会因为依赖冲突导致部署失败。为了避免后续陷入持续积累的冲突导致难以解决，还是先把这个冲突隐患解决掉。

先卸载slimsearch，然后将vuepress 及相关依赖手动升级到最新版本，再次安装时执行正常。
2. 运行
启动本地开发服务器后报错：

vuepress-theme-hope:  × You are not allowed to use plugin "@vuepress/plugin-slimsearch" yourself in vuepress config file. Set "plugins.slimsearch" in theme options to customize it.

需要在在theme 的 plugins 中设置slimsearch
以下是vuepress 中提供的设置方法：

.vuepress/config.ts
import { defineUserConfig } from "vuepress";

import theme from "./theme.js";
import { slimsearchPlugin } from '@vuepress/plugin-slimsearch'

export default defineUserConfig({
  base: "/",
  //...
  plugins: [    
    slimsearchPlugin({
    }),
  ],
});

hope主题参照主题官方文档设置，不要和vuepress 混用。