Vuepress DeBug

Megestus2024年2月26日VuepressGithubDeBugVuepress

Vuepress DeBug 记录一些踩过的坑

vuepress-vite.js 的模块丢失

PS W:\GitHub\blog> npm run docs:dev
Debugger attached.

> vuepress-theme-hope-template@2.0.0 docs:dev
> vuepress-vite dev src

Debugger attached.
Waiting for the debugger to disconnect...
node:internal/modules/cjs/loader:1051
  throw err;
  ^

Error: Cannot find module 'W:\GitHub\blog\node_modules\vuepress\bin\vuepress-vite.js'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

该错误指示 Node.js 无法找到名为 vuepress-vite.js 的模块。

一般都是拷贝了文件到别的目录导致丢失的，如需要迁移仓库。

决绝方案

cmd重新安装依赖包即可，如果安装不了则可以看下方 运行npm install卡住不动的解决方案

npm install

Error: Command pnpm recursive install (cwd: undefined) exits with status 1

在github构建时提示以上报错检查一下安装依赖 pnpm-lock.yaml
这里是我删除了@vuepress/plugin-shiki插件没有在安装依赖中移除。

pnpm-lock.yaml

Run pnpm/action-setup@v2
Running self-installer...
Installation Completed!
Running pnpm recursive install...
  undefined
   ERR_PNPM_OUTDATED_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with package.json
  
  Note that in CI environments this setting is true by default. If you still need to run install in such cases, use "pnpm install --no-frozen-lockfile"
  
      Failure reason:
      specifiers in the lockfile ({"@vuepress/client":"2.0.0-rc.0","@vuepress/plugin-search":"2.0.0-rc.0","@vuepress/plugin-shiki":"2.0.0-rc.17","vue":"^3.4.3","vuepress":"2.0.0-rc.0","vuepress-plugin-search-pro":"2.0.0-rc.11","vuepress-theme-hope":"2.0.0-rc.11"}) don't match specs in package.json ({"@vuepress/client":"2.0.0-rc.0","@vuepress/plugin-search":"2.0.0-rc.0","vue":"^3.4.3","vuepress":"2.0.0-rc.0","vuepress-plugin-search-pro":"2.0.0-rc.11","vuepress-theme-hope":"2.0.0-rc.11"})  

Error: Command pnpm recursive install (cwd: undefined) exits with status 1

本地构建静态文件之后出现样式无法加载问题

构建静态文件之后就完全乱了,如下：

通过更改indexn.html的内容。把/修改为./ 部分样式就发现了恢复

就可以判断出是构建静态文件的时候全部是绝对路径，应该是相对路径的。

决绝方案：把config里面的base配置，直接删掉，或注释。然后再次构建静态文件会解决样式丢失的问题。

运行npm install卡住不动的解决方案

1.首先检查npm代理，是否已经使用国内镜像

执行以下命令查看是否为国内镜像

npm config get registry

返回是 https://registry.npmjs.org/ 则是原地址;
出现https://registry.npmmirror.com，表明已经为国内镜像无需再修改.

如果不是则换成国内镜像，执行以下命令

npm config set registry=https://registry.npmmirror.com

执行以下命令查看是否配置成功

npm config get registry