Vite+Vue3+Electron打包后动态拼接静态资源路径异常

问题情况 #

打包后静态资源路径指向异常：静态写死的资源路径正常，动态拼接的路径会指向错误位置。

示例代码 #

<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

CSS字体资源的同类问题 #

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

当前vite.config.ts配置 #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [vue(), electron({
    entry: 'electron/main.ts',
  })],
  build: {
    assetsInlineLimit: 0,
  },
})

解决方案 #

1. 动态资源路径修正 #

使用Vite内置的import.meta.env.BASE_URL拼接动态路径，该变量会在打包时自动替换为正确的资源基础路径：

<template>
  <img :src="`${import.meta.env.BASE_URL}${filename}`" class="logo" alt="Vite logo" />
</template>

2. CSS字体资源路径修正 #

将绝对路径改为相对路径，或配置Vite的base参数统一处理资源路径：

方式一：修改CSS路径为相对路径

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

方式二：配置Vite的base参数

在vite.config.ts中添加base配置，将资源路径设为相对路径：

export default defineConfig({
  base: './', // 关键配置：设置为相对路径
  plugins: [vue(), electron({
    entry: 'electron/main.ts',
  })],
  build: {
    assetsInlineLimit: 0,
  },
})

配置base: './'后，Vite会自动将所有静态资源路径处理为相对路径，无论静态写死还是动态拼接，都能正确指向打包后app.asar内的dist目录。

内容的提问来源于stack exchange，提问作者oyal