Die URL der statischen Ressource kann in der Vite js-Entwicklungsumgebung nicht gefunden werden

Question

Importierte PNG-Bilder können nicht lokal analysiert werden (im Entwicklungsmodus ausführen npm vite). Sie haben es jedoch in der Produktionsversion behoben. Zuerst habe ich sie dynamisch importiert, aber sie wurden in der Produktionsversion nicht aufgelöst, also habe ich sie vorab importiert.

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

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

test.png:1 GET http://localhost:3000/frontend/src/assets/frontend/src/assets/sprites/test.png 404 (Nicht gefunden)

Answer 1

要解决此问题，请使用新的 URL(url, import.meta.url) 解析 prod 和 dev 中的静态资源

请参阅有关静态资产处理的 Vite 文档：https ://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

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