当前位置：首页 > news >正文

使用VuePress开发日志

news 来源：原创 2025/6/23 6:09:01

结合官方教程，补充一些细节。

快速上手 | VuePress中文文档 | VuePress中文网

VuePress使用步骤

创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

使用你喜欢的包管理器进行初始化
```
yarn init # npm init
```
将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress
```
yarn add -D vuepress # npm install -D vuepress
```
注意

如果你的现有项目依赖了 webpack 3.x，我们推荐使用 Yarn (opens new window)而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

在 package.json 中添加一些 scripts(opens new window)

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。
```
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}
```
在本地启动服务器
```
yarn docs:dev # npm run docs:dev
```
VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。

遇到的问题及解决办法

1、yarn : 无法加载文件 C:\Users\86178\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。

这个问题是由于 PowerShell 的执行策略限制导致的。Windows 系统默认禁止运行脚本，需要手动更改执行策略。

以管理员身份打开 PowerShell

更改系统策略

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

注意：Set-ExecutionPolicy 是 Windows PowerShell 中的一个命令，用于设置脚本执行策略，它无法在命令提示符（CMD）或其他终端中运行。

2、 'vuepress' 不是内部或外部命令，也不是可运行的程序或批处理文件。

3、无法将“vuepress”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

通常是因为 VuePress 没有正确安装或者系统的环境变量没有配置正确。

如果 VuePress 已经安装，你应该能看到 VuePress 的版本号。

vuepress -v

vuepress --version

如果没有安装，或者命令行提示“无法识别”，则需要重新安装 VuePress。

//卸载

yarn global remove vuepress

官网提示可以局部安装

如果您想移除安装在D盘的vuepress，您需要确保您当前所在的命令行目录是D盘的项目目录，然后执行以下命令来移除vuepress。

yarn remove vuepress

//重新安装

yarn global add vuepress

可以看到提示安装成功，甚至vuepress版本号都有了。但使用vuepress -v或者vuepress --version依旧报错。

检查环境变量

在Windows 11中编辑环境变量的步骤如下：

打开“开始”菜单，搜索并点击“高级系统设置”。
在弹出的“系统属性”窗口中，点击“环境变量”按钮。
在“环境变量”窗口中，可以看到用户变量和系统变量两个区域。
用户变量仅对当前用户生效。
系统变量对所有用户生效。
要添加新环境变量，点击“新建”按钮，输入变量名和变量值。
要修改现有环境变量，选择变量后点击“编辑”按钮，修改变量值。
要删除环境变量，选择变量后点击“删除”按钮。
完成编辑后，点击“确定”保存更改。

注意：修改系统环境变量可能需要管理员权限，且某些更改可能需要重启计算机或重新登录账户才能生效。

Win11设置=》搜索 “高级系统设置”

查看VuePress路径

yarn：如果使用 yarn 安装，可以运行 yarn global list 来查看全局安装的包，其中包括 VuePress 的路径。

要解决这个问题（No license field info "vuepress@1.9.10" has binaries），首先检查你的项目中的package.json文件，确保其中包含了VuePress的正确版本信息，并且license字段没有缺失。

重点：

确保你已经在项目中运行了npm install或者yarn install命令来安装所有依赖，包括VuePress。如果在安装依赖时出现错误，也可能导致版本信息或者许可信息的缺失。

配置系统的 PATH 环境变量以包含 VuePress 的可执行文件路径

配置系统的 PATH 环境变量以包含 VuePress 的可执行文件路径，可以让您在任何目录下直接运行 VuePress 命令。以下是具体步骤：

Windows 系统

打开系统属性：右键点击“此电脑”或“计算机”，选择“属性”，然后点击“高级系统设置”。
进入环境变量设置：在“系统属性”窗口中，点击“环境变量”按钮。
编辑 PATH 变量：在“系统变量”中找到“Path”变量，点击“编辑”。
添加 VuePress 路径：如果使用全局安装，通常路径为 C:\Users\YourUsername\AppData\Roaming\npm；如果使用项目局部安装，找到项目中的 node_modules\.bin 目录，将其添加到 PATH 中。
保存并重启：确认更改，关闭所有窗口，重启计算机使更改生效（不需要重启）。

4、出现 `Cannot find module 'vue-template-compiler'` 错误

项目依赖未正确安装；
vue 和 vue-template-compiler 版本不一致；
该模块未被正确包含在 node_modules 中。

安装缺失的依赖

yarn add vue-template-compiler --dev

确保 vue 和 `vue-template-compiler` 版本一致

这两个包必须严格版本一致，否则会抛出错误。

项目成功运行

package.json文件

{"name": "vuepress-starter","version": "1.0.0","main": "index.js","license": "MIT","scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"},"devDependencies": {"vue-template-compiler": "^2.7.16"}
}