L'URL de la ressource statique est introuvable dans l'environnement de développement Vite js

Question

Les images png importées ne peuvent pas être analysées localement (en mode développement, exécutez npm vite). Cependant, ils l'ont corrigé dans la version de production. Au début, je les ai importés dynamiquement, mais ils n'ont pas été résolus dans la version de production, je les ai donc importés à l'avance.

//.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 (introuvable)

Answer 1

Pour résoudre ce problème, utilisez une nouvelle URL (url, import.meta.url) pour résoudre les ressources statiques en prod et dev

Voir la documentation Vite sur la gestion statique des actifs : https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

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