Teg <video><source> ralat binaan Vue.js Vite

Question

Saya sedang membangunkan aplikasi Vue 3 dan cuba menggantikan imej statik dengan video tetapi ia melemparkan

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

Binaan ini (bukan imej yang anda gunakan, hanya untuk ditunjukkan):

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

Ini tidak akan:

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

Saya baru menggunakan Vite dan saya ingin memahami sebab nampaknya ingin mengimport video daripada teg HTML.

Answer 1

Seperti yang @adain nyatakan, .mov fail tiada dalam senarai lalai jenis sumber yang akan dikecualikan daripada saluran paip transformasi yang digunakan dalam binaan.

Penyelesaian adalah untuk mengkonfigurasi assetsIncludeassetsInclude 将 .mov untuk menambah fail ke senarai ini:

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

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

Penyelesaian lain ialah mengikat rentetan literal: assetsIninclude (tidak diperlukan untuk konfigurasi di atas)

🎜