VuePress 2 执行自定义的 JavaScript 代码

发表于 阅读次数： 评论数： 本文字数： 297 阅读时长 ≈ 1 分钟

前言

  • VuePress 2 的核心目录结构如下：
1
2
3
4
5
.vuepress
├── client.ts
└── utils
    └── custom.ts
...

第一步

  • 在 .vuepress 目录下，创建子目录 utils，并在 utils 子目录下创建 custom.ts 源文件，其源码如下：
1
2
3
export function custom() {
    console.log("code running");
}

特别注意

如果不希望使用 TypeScript，而是直接使用 JavaScript，可以直接将文件名 custom.ts 改为 custom.js，这样编译自定义的 JavaScript 代码时就不再需要依赖 TypeScript 组件。

第二步

  • 在 .vuepress 目录下，创建 client.ts 源文件，，其源码如下：
1
2
3
4
5
6
7
8
import { defineClientConfig } from '@vuepress/client';
import { custom } from './utils/custom';

export default defineClientConfig({
  enhance() {
    custom();
  }
});

第三步

  • 重新编译构建 VuePress 2 博客，命令如下：
1
npm run docs:dev
  • 最后打开浏览器访问 VuePress 2 博客，观察浏览器的控制台是否有输出相应的日志信息