VuePressVuePress
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 深入

    • 架构
    • 开发插件
    • 开发主题
  • Cookbook

    • 介绍
    • 客户端配置的使用方法
    • 添加额外页面
    • 开发一个可继承的主题
    • 向客户端代码传递数据
    • Markdown 与 Vue SFC
    • 解析路由

向客户端代码传递数据

我们知道,VuePress 插件入口和主题入口是在 Node 端处理的,但有时候你可能需要向客户端动态传递数据。例如,你希望在用户传入不同的选项时生成不同的数据。

使用 define Hook

插件 API 提供了一个 define Hook 来定义客户端代码中的全局常量。你可以利用它来向客户端传递数据。

首先,通过 define Hook 定义一些常量:

export default (options) => ({
  define: {
    __FOO__: options.foo || 'str',
    __OBJ__: {
      bar: options.bar || 123,
    },
  },
})

然后,在客户端代码中直接使用它们:

const foo = __FOO__
const obj = __OBJ__

如果你在客户端代码中使用 TypeScript ,你可能需要手动声明这些全局常量的类型:

declare const __FOO__: string
declare const __OBJ__: { bar: number }

写入并加载临时文件

如果你需要实现一些更复杂的功能,你可以写入临时文件,并在客户端代码中动态加载它们。

首先,写入一个名为 foo.js 的临时文件,它将会生成在 temp 目录中:

export default (options) => ({
  async onPrepared(app) {
    // 写入临时文件
    await app.writeTemp(
      'foo.js',
      `export const foo = ${JSON.stringify(options.foo)}`,
    )
  },
})

然后,在客户端代码中通过 @temp 别名来加载临时文件:

import { foo } from '@temp/foo'

如果你在客户端代码中使用 TypeScript ,你可能需要手动声明这些临时模块的类型:

declare module '@temp/foo' {
  export const foo: string
}
在 GitHub 上编辑此页
上次更新: 2023/12/10 13:10
贡献者: meteorlxy, Mr.Hope, Xinyu Liu
Prev
开发一个可继承的主题
Next
Markdown 与 Vue SFC