Estoy trabajando en una aplicación Vue 3 y estoy tratando de cambiar una imagen estática por un video y arroja un
[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) ...Esto construye (no es que usarías una imagen sino solo para mostrar):
<video class="w-2/3 xs:w-full" controls="controls" name="Video Name"> <source src="/images/my_image.png"> </video>Esto no lo hace:
<video class="w-2/3 xs:w-full" controls="controls" name="Video Name"> <source src="/images/my_movie.mov"> </video>Soy nuevo en Vite y estoy tratando de entender por qué parece querer importar el video desde la etiqueta HTML.
Agrega poster="/images/my_image.png" a la etiqueta del video. Me gusta esto;
<video poster=“/imágenes/mi_imagen.png” …
De lo contrario, no puede colocar una imagen en la etiqueta de origen.
Vite parece no poder resolver archivos de video .mov . Lea el documento, configure assetsInclude , compilación exitosa.
export default defineConfig({ assetsInclude: ['**/*.mov'], ... })Como señaló @adain, los archivos .mov no están en la lista predeterminada de tipos de activos para excluir de la canalización de transformación utilizada en la compilación .
La solución es configurar assetsInclude para agregar archivos .mov a esa lista:
// vite.config.js import { defineConfig } from 'vite' export default defineConfig({ assetsInclude: ['**/*.mov'], ⋮ }) Una solución alternativa es vincular una cadena literal: (no es necesario con la configuración de assetsInclude anterior)
<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>