CODEWITHSUNDEEP
vue.jsvuejs3vite
Philx94
Philx94

Reputation: 1285

Url of static assets not found in development with Vite js

Imports of png images fail to resolve locally (in development mode, running npm vite). They do resolve in the production build however. At first I imported them dynamically but they wouldn't resolve in the production build so I imported them beforehand.

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

Upvotes: 1

Views: 14501

Answers (1)

Philx94
Philx94

Reputation: 1285

To fix this issue, use new URL(url, import.meta.url) to resolve static assets both in prod and dev

See Vite documentation on Static Asset Handling : https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

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

Upvotes: 5

Related Questions