项目介绍

前端项目

前端编辑器目录

├─assets 资源目录
├─components 公共组件
├─config 全景配置文件
├─icons 图标
├─language 多语言配置文件
├─layout 布局框架
├─less 公共less文件
├─pages 页面
│  ├─editor 编辑器页面
│  │  ├─common 编辑器公共插件
│  │  │  ├─dragitem 素材拖入画布的组件
│  │  │  └─source 资源列表公共模块组件
│  │  ├─components 编辑器大模块组件
│  │  │  ├─canvas 画布区域组件
│  │  │  ├─header 编辑器顶部组件
│  │  │  ├─options 设置区域组件
│  │  │  │  ├─components 设置区域组件模块
│  │  │  │  └─elements 元素的设置区域配置文件
│  │  │  ├─replace-tpl 模版替换业务组件
│  │  │  ├─sidebar 左侧菜单模块
│  │  │  ├─sources 左侧资源模块
│  │  │  ├─timeline 时间轴模块
├─server API配置
├─stores mobx的store管理
├─theme 主题配置
└─utils 公共插件

前端开发部署

项目采用 yarn workspace 的开发方式，请务必使用 yarn 开发

安装依赖

yarn install

该过程耗时比较长，需要从远程去拉取所需依赖包，安装依赖包成功后才可以进行接下来的操作。

进入开发调试模式

yarn dev

项目使用 vite 进行打包和调试，如果需要对项目进行二次开发和修改，可以执行该命令进入开发模式，项目启动成功后浏览器输入：https://127.0.0.1:3002 进行项目开发和调试。

开发前请注意是否需要修改 vite 的代理配置：

javascript

// video-editor/vite.config.ts
server: {
  https: true,
  host: '0.0.0.0',
  port: 3002,
  proxy: {
    '/cgi-bin': { // 微信二维码地址代理
      target: 'https://video.h5ds.com',
      changeOrigin: true,
    },
    '/api': { // api地址代理
      target: 'https://video.h5ds.com',
      changeOrigin: true,
    },
    '/video': { // 部分素材的代理地址
      target: 'https://cdn.h5ds.com',
      changeOrigin: true,
    },
  },
},

打包发布

yarn build

打包成功后会生成 dist 目录，直接部署到 Nginx 服务器目录前端就完成了部署，因为视频的编解码相关的 API 需要在 https 环境的支持，所以项目必须要在 https 环境下运行。具体的部署文档请参考部署说明文档。

项目介绍 ​

前端编辑器目录 ​

前端开发部署 ​

项目介绍

前端编辑器目录

前端开发部署