约 663 字大约 2 分钟

2022-05-13

安装

yarn
yarn add vuepress-plugin-netlify-functions

在vuepress中使用

添加插件

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

.vuepress/config.ts
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 'path'
import { App } from '@vuepress/core'
import { useNetlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'

const 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 的插件,这里提供了一个 例子:

plugin-page-collection

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

该例子提供了以下功能:

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