Vite+Vue3项目构建后视频未打包至dist文件夹问题求助

• 检查资源引用方式
  代码里引用本地视频时，必须用Vite能识别的导入方式，不能直接写静态路径。比如在组件脚本里导入：

  import exampleVideo from '@/assets/works/example.mp4'
  

  然后在模板里绑定src：

  <video :src="exampleVideo" controls></video>
  

  要是直接写<video src="/assets/works/example.mp4">，Vite不会把这个路径的文件当成需要打包的资源，自然不会出现在dist里。

• 添加Vite的assetInclude配置
  在vite.config.js里明确告诉Vite要处理mp4格式的资源：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    assetsInclude: ['**/*.mp4']
  })
  

  这个配置会让Vite把所有mp4文件纳入打包范围，避免被遗漏。

• 改用public目录存放视频
  新建项目根目录下的public文件夹，把视频放进去，然后模板里直接用根路径引用：

  <video src="/example.mp4" controls></video>
  

  Vite会自动把public下的所有文件原封不动复制到dist根目录，这样build后视频肯定会出现在dist里。

• 手动复制资源（兜底方案）
  用@rollup/plugin-copy插件强制复制视频文件：

  1. 先安装插件：

     npm install @rollup/plugin-copy --save-dev
     

  2. 在vite.config.js里配置：

     import { defineConfig } from 'vite'
     import vue from '@vitejs/plugin-vue'
     import copy from '@rollup/plugin-copy'
     
     export default defineConfig({
       plugins: [
         vue(),
         copy({
           targets: [
             { src: 'src/assets/works/*.mp4', dest: 'dist/assets/works' }
           ],
           hook: 'writeBundle'
         })
       ]
     })
     

  这样每次执行npm run build时，插件会自动把指定路径的视频复制到dist对应目录。

内容的提问来源于stack exchange，提问作者zarjevski