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>

2024-03-15_11-17-27.png

第一个路径不正确: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 盘读取

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

阅读 2.3k
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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题