VevDemo 是一个功能完整的 Web 应用，包含前端（基于 Vue/React，使用 Vite 构建）和后端（基于 Node.js）两部分，模拟了在真实业务场景中集成和使用视频剪辑 Web SDK 的完整流程。本文将指导您如何在本地快速部署和运行 VevDemo，从而直观地体验其丰富的视频编辑功能。

前提条件

• 已注册火山引擎账号。如果您是首次登录火山引擎控制台，请先完成实名认证。
• 已开通视频点播服务。
• 已创建空间，用于存储剪辑素材和产物。
• 已将媒资素材上传至视频点播服务。具体操作步骤请见通过控制台上传媒资。
• 已创建 IAM 用户并授权，并获取对应的 AK/SK。具体操作，请参见创建子账号并授权。
• 确保您的开发环境中已安装以下软件：
  • Node.js: v14.x 或更高版本（推荐使用 LTS 版本）。
  • npm: 通常会随 Node.js 一同安装。

运行 Demo

1. 下载 vevdemo.zip 压缩包，并将其解压到您本地的工作目录。解压后，您将看到如下的项目结构：

   vevdemo/
   ├── fe/          # 前端项目 (Frontend)
   ├── nodejs/      # 后端项目 (Node.js Server)
   └── package.json
   

2. 为了让后端服务能够调用火山引擎的云端能力（如媒资存储、合成任务等），您需要配置访问密钥 AK/SK。

   1. 进入后端项目目录：

      cd vevdemo/nodejs
      

   2. 在该目录下创建一个名为 .env 的文件。

   3. 在 .env 文件中添加以下内容，并将 your_..._key 替换为您的真实密钥：

      # 火山引擎 VOD 服务密钥配置
      VOLC_ACCESS_KEY=your_access_key
      VOLC_SECRET_KEY=your_secret_key
      

3. 启动后端服务：

   1. 在 nodejs 目录下执行以下命令安装依赖：

      npm install
      

   2. 依赖安装完成后，执行以下命令启动后端服务：

      npm run dev
      

      当您看到类似 Server is running on http://localhost:3001 的输出时，表示后端服务已成功启动。

4. 启动前端服务：

   1. 新开一个终端窗口，并进入 fe 目录：

      cd vevdemo/fe
      

   2. 执行以下命令安装依赖：

      npm install
      

   3. 依赖安装完成后，启动前端服务：

      npm run dev
      

      此命令会启动一个 Vite 开发服务器，通常监听在 http://localhost:8084。

5. 所有服务启动成功后，打开您的浏览器，访问 http://localhost:8084。​您可以看到 VevDemo 的视频剪辑界面，尝试上传素材、拖拽轨道、添加特效，体验完整的剪辑流程。
   

常见问题

启动服务时提示端口被占用？

这是因为 3001 (后端) 或 8084 (前端) 端口已被其他程序使用。您可以：

• 修改端口号：分别在 nodejs/config/default.js 和 fe/vite.config.js 文件中修改为其他可用端口。
• 终止占用进程：找到并停止占用该端口的程序。

npm install 安装依赖失败？

通常是网络问题导致。您可以尝试以下方法：

• 切换 npm 镜像源：执行 npm config set registry https://registry.npmmirror.com 来使用国内镜像。
• 清除缓存：执行 npm cache clean --force 后再重试。
• 检查您的网络连接或代理设置。

浏览器访问前端页面，但功能异常（如素材上传失败）？

请检查以下几点：

• 后端服务是否正常运行：确认后端的终端窗口没有报错信息。
• 环境变量是否生效：
  • 确保 .env 文件位于 nodejs 目录下，且文件名无误（不是 .env.txt）。
  • 检查文件中的 VOLC_ACCESS_KEY 和 VOLC_SECRET_KEY 是否已正确填写。
  • 修改 .env 文件后，必须重启后端服务才能生效。
• 跨域问题：Demo 的后端已默认配置了 CORS 跨域支持。如果仍遇到问题，请检查浏览器控制台的网络请求，确认前端请求的地址是否为 http://localhost:3001。