URL sumber statik tidak boleh ditemui dalam persekitaran pembangunan Vite js

Question

Imej png yang diimport tidak boleh dihuraikan secara setempat (dalam mod pembangunan, jalankan npm vite). Walau bagaimanapun, mereka telah membetulkannya dalam versi pengeluaran. Pada mulanya, saya mengimportnya secara dinamik, tetapi mereka tidak menyelesaikannya dalam versi pengeluaran, jadi saya mengimportnya lebih awal daripada masa.

//.ts file
import test from "../assets/sprites/test.png"

//vite.config.ts
export default defineConfig({
    plugins: [vue()],
    build: {
        target: 'esnext'
    }
})

test.png:1 DAPATKAN http://localhost:3000/frontend/src/assets/frontend/src/assets/sprites/test.png 404 (Tidak Ditemui)

Answer 1

Untuk menyelesaikan isu ini, gunakan URL baharu(url, import.meta.url) untuk menyelesaikan sumber statik dalam prod dan dev

Lihat dokumentasi Vite tentang pengendalian aset statik: https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

const test = new URL('../assets/sprites/test.png', import.meta.url).href