Vue.js Vite 构建错误 <video><source> 标签

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)
...

此构建（不是您使用图像，只是为了显示）：

[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>

我是 Vite 的新手，我试图理解为什么它似乎想要从 HTML 标签导入视频。

Answer 1

正如@adain 所指出的，.mov文件不在构建中使用的转换管道中排除的默认资产类型列表中。

\n

解决办法是配置assetsInclude添加.mov到该列表：

\n

// vite.config.js\nimport { defineConfig } from \'vite\'\n\nexport default defineConfig({\n  assetsInclude: [\'**/*.mov\'],\n  \xe2\x8b\xae\n})\n

\n

另一种解决方法是绑定文字字符串： （以上配置不需要assetsInclude）

\n

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

\n

Answer 2

将 poster="/images/my_image.png" 添加到视频标签。像这样;

\n

<视频海报=\xe2\x80\x9c/images/my_image.png\xe2\x80\x9d \xe2\x80\xa6

\n

否则，您可以\xe2\x80\x99t 将图像放入源标记中。

\n