The URL of the static resource cannot be found in the Vite js development environment
P粉895187266
P粉895187266 2023-10-25 16:56:58
0
1
703

Imported png images cannot be parsed locally (in development mode, run npm vite). However, they did fix it in the production version. At first, I imported them dynamically, but they didn't resolve in the production version, so I imported them ahead of time.

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

P粉895187266
P粉895187266

reply all(1)
P粉494151941

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

See the 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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!