带有 标签的 Vue.js 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

正如@adain 所指出的，.mov 文件不在 default list of asset types to exclude from the transform pipeline used in the build 中.

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

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

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

另一种解决方法是 bind文字字符串: (上面的 assetsInclude 配置不需要)

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

  <source :src="`/images/my_movie.mov`">
</video>