使用

pengzhanbo

586字约2分钟

2024-03-12

安装

npm

npm install vuepress-plugin-netlify-functions

yarn

yarn add vuepress-plugin-netlify-functions

pnpm

pnpm add vuepress-plugin-netlify-functions

在vuepress中使用

添加插件

在vuepress 的配置文件中引入并在 plugins 字段中添加插件。

.vuepress/config.

import { defineUserConfig } from 'vuepress'
import { netlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'

export default defineUserConfig({
  // ...
  plugins: [
    netlifyFunctionsPlugin(),
  ]
  // ...
})

编写 functions

启动 vuepress 开发服务后，就可以在你的 .vuepress/functions/ 目录中，新建并开发你的 function

functions 开发指南

在 vuepress plugin 中使用

添加插件钩子

typescript

import * as path from 'node:path'
import { App } from '@vuepress/core'
import { useNetlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'

function myPlugin(): Plugin {
  return (app: App) => {
    const {
      // 请求前缀,  默认 /api
      proxyPrefix,
      preparePluginFunctions,
      generatePluginFunctions
    } = useNetlifyFunctionsPlugin(app, {
      // 指定插件的functions目录，相关脚本在此目录中开发
      directory: path.resolve(__dirname, 'functions')
    })
    return {
      name: 'vuepress-plugin-myPlugin',
      onPrepared: () => preparePluginFunctions(),
      onGenerated: () => generatePluginFunctions(),
    }
  }
}

在你的插件开发目录，假如是以下结构：

.
└─src # 开发目录
   ├─shared
   └─node # node 端
      ├─functions # functions目录
      │  └─my_function.ts # functions脚本
      ├─plugin.ts
      └─index.ts

那么，就在你的 src/node/functions 目录下进行 functions 开发

functions 开发指南

如果你已经开发好了一个 functions/my_function.ts 的function。

那么你可以在 client端，通过以下方式调用：

async function fetchMyFunction() {
  const result = await fetch('/api/my_functions')
  // do something
}

就像调用一个普通接口一个样简单。

环境变量

你可以在项目根目录中，新建一个 .env 文件，用于配置开发时环境变量

注意

这些环境变量仅用于开发环境时使用，部署生产时不会被加载。

是用于在开发环境中代替 Netlify Environment Variables 。在生产环境中，应该使用 Netlify Environment Variables 设置这些环境变量。

如果你的 .env 文件中有比较私密的信息，建议将 .env 文件添加到 .gitignore 中，避免提交到仓库中。

.env

YOUR_ENV_VAR='your env var'

functions/my_function.ts

const YOUR_ENV_VAR = process.env.YOUR_ENV_VAR

示例

如何使用本插件开发一个提供 functions 的插件，这里提供了一个例子：

plugin-page-collection

可以参考此例子进行插件开发。

该例子提供了以下功能：

连接 lean cloud
记录页面访问次数，并上报到 lean cloud 数据库。
查询当前页面访问次数，并提供组件嵌入到页面中。