带有Vue.js标记的<video><source> Vite构建错误

Question

我正在开发一个Vue 3应用程序，并试图将一个静态图像转换为一个视频，它正在抛出一个

[vite] Build errored out.
Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript) at error (/myapp/node_modules/rollup/dist/shared/rollup.js:5275:30)
...

这将构建(不是要使用图像，而是为了显示)：

<video class="w-2/3 xs:w-full" controls="controls" name="Video Name">
     <source src="/images/my_image.png">
</video>

这并不意味着：

<video class="w-2/3 xs:w-full" controls="controls" name="Video Name">
     <source src="/images/my_movie.mov">
</video>

我刚开始使用Vite，并试图理解为什么它似乎想从HTML标记导入视频。

Answer 1

Vite似乎无法解析.mov视频文件。阅读文档，设置assetsInclude，生成成功。

export default defineConfig({
  assetsInclude: ['**/*.mov'],
  ...
})

Answer 2

向视频标记中添加“/poster=/my_Image.png”。就像这样；

<视频poster=“/图像/my_Image.png”…

否则，就不能将图像放入源标记中。