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