前端 - Vite + Vue3 + Electron 打包后静态资源路径错误？

Question

Vite + Vue3 + Electron 打包后静态资源路径错误

图片 src 如果是动态拼接的话，路径指向会出现问题

<script setup lang="ts">import { ref } from "vue";const filename = ref("vite.svg");</script><template>  <img :src="'/' + filename" class="logo" alt="Vite logo" />  <img src="/vite.svg" class="logo" alt="Vite logo" /></template>

第一个路径不正确：file:///G:/vite.svg
第二个路径为：file:///G:/vite-electron/release/win-unpacked/resources/app.asar/dist/vite.svg

@font-face {  font-family: HanYiQiHei;  src: url('/fonts/HanYiQiHei.ttf');}

还有这种字体文件导入也会出现问题，类似上面直接从 G 盘读取

有没有什么好的解决方案？

Answer 1

<script setup>const modules = import.meta.glob('./image/*.svg', { eager: true, import: 'default' })const fileName = ref('xx.svg')<script><template><img :src="modules[fileName]" /></template>