Vite + Vue3 + Electron 打包后静态资源路径错误?
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 盘读取
有没有什么好的解决方案?
回复
1个回答

test
2024-06-20
<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>
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容