匯入 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(找不到)
要解決此問題,請使用新的 URL(url, import.meta.url) 解析 prod 和 dev 中的靜態資源
請參閱靜態資產處理的 Vite 文件:https ://vitejs.dev/guide/assets.html#new-url-url-import-meta-url