Erreur de construction Vue.js Vite Balise <video><source>

Question

Je développe une application Vue 3 et j'essaie de remplacer une image statique par une vidéo mais ça lance

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

Cette version (pas l'image que vous utilisez, juste pour montrer) :

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

Ce ne sera pas le cas :

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

Je suis nouveau sur Vite et j'aimerais comprendre pourquoi il semble vouloir importer des vidéos à partir de balises HTML.

Answer 1

Comme @adain l'a souligné, .mov les fichiers ne sont pas dans la liste par défaut des types de ressources à exclure du pipeline de transformation utilisé dans les builds.

La solution est de configurer assetsIncludeassetsInclude 将 .mov pour ajouter le fichier p> à cette liste :

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

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

Une autre solution consiste à lier une chaîne littérale : assetsIninclude (non requis pour la configuration ci-dessus) 🎜