Vite js开发环境中无法找到静态资源的URL

Question

导入 png 图片无法在本地解析（在开发模式下，运行 npm vite）。然而，他们确实在生产版本中解决了。起初，我动态导入它们，但它们在生产版本中无法解析，因此我提前导入了它们。

//.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（未找到）

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