vue + ts +vite 怎么做到视频打包压缩

在 Vue.js、TypeScript (TS) 和 Vite 项目中整合视频文件并进行打包和压缩，你可以按照以下步骤操作：

1. **安装必要的依赖**:
使用 `npm` 或 `yarn` 安装所需的包，例如 `@ffmpeg/ffprobe`（用于获取视频信息）、`rollup-plugin-videos`（处理视频）以及视频压缩库（如 `sharp` 或 `ffmpeg`）。

   npm install @ffmpeg/ffprobe rollup-plugin-videos sharp @rollup/plugin-video-ffmpeg --save-dev

2. **配置 TypeScript**:
在 `.tsconfig.json` 中启用类型检查，并设置目标为 ES模块。可能还需要引入 `type-check-only` 配置项。

   {
     "compilerOptions": {
       "target": "esnext",
       "module": "commonjs",
       "strict": true,
       "esModuleInterop": true,
       "types": ["node", "fs"]
     },
     // 如果使用 typescript 类型检查
     "typeCheckOnly": true
   }

3. **Vite 配置**:
更新 `vite.config.ts` 来配置视频处理插件。这里使用 `rollup-plugin-videos`。添加到 `build` 部分，指定视频文件的处理规则。

   import { defineConfig } from 'vite';
   import videoPlugin from 'rollup-plugin-videos';

   export default defineConfig({
     build: {
       plugins: [
         videoPlugin({
           ffmpegPath: './node_modules/@ffmpeg-installer/ffmpeg/bin/ffmpeg', // 根据你的 FFmpeg 安装路径调整
           series: ['mp4'], // 只处理 mp4 文件
           maxSize: 10 * 1024 * 1024, // 视频大小限制（MB）
         }),
       ],
     },
   });

4. **处理视频**:
当你的代码中有引用视频的地方，比如 `<video>` 元素或导入视频，会触发这个插件自动进行压缩。

5. **打包**:
运行 `npm run build` 或 `yarn build` 来触发整个构建过程，包括视频的压缩和打包。

6. **验证结果**:
打包完成后，在构建目录里查看是否有压缩后的视频文件，并确认其质量和尺寸是否满足需求。