Vue.js Vite-Build-Fehler <video><source>-Tag

Question

Ich entwickle eine Vue 3-App und versuche, ein statisches Bild durch ein Video zu ersetzen, aber es löst Fehler aus

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

Dieser Build (nicht das Bild, das Sie verwenden, nur zur Darstellung):

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

Das wird nicht:

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

Ich bin neu bei Vite und würde gerne verstehen, warum es anscheinend Videos aus HTML-Tags importieren möchte.

Answer 1

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

解决方案是配置 assetsInclude 将 .mov 文件添加到该列表中：

// vite.config.js
import { defineConfig } from 'vite'

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

另一种解决方法是绑定一个文字string: （上面的 assetsIninclude 配置不需要）