解决 Electron 打包后部分图片不显示的暂行方案

原因

Electron 打包时，Vite 只会把显式 URL 引用到的资源打包进去。隐式 URL 资源不会自动进入构建产物，因此运行后会出现图片路径找不到的问题。

示例 1：显式引入背景图

前提：已经把 public 文件夹拷贝到了 assets 文件夹下。

function background() {
  // 显式 URL 引入路径
  const img1 = new URL('@/assets/public/bigscreen/background/img(1).png', import.meta.url).href
  const img2 = new URL('@/assets/public/bigscreen/background/img(2).png', import.meta.url).href
  const img3 = new URL('@/assets/public/bigscreen/background/img(3).png', import.meta.url).href

  // 之前的写法
  // switch (screenInfo.value.backgroundStyle) {
  //   case '1':
  //     return `url('/bigscreen/background/img(1).png') no-repeat`
  //   case '2':
  //     return `url('/bigscreen/background/img(2).png') no-repeat`
  //   case '3':
  //     return `url('/bigscreen/background/img(3).png') no-repeat`
  // }

  switch (screenInfo.value.backgroundStyle) {
    case '1':
      return `url('${img1}') no-repeat`
    case '2':
      return `url('${img2}') no-repeat`
    case '3':
      return `url('${img3}') no-repeat`
  }
}

示例 2：组件图片改为变量路径

原写法：

<a-image
  width="101"
  height="101"
  :preview="false"
  src="/static/helpImg/m.png"
></a-image>

替换为：

<a-image
  width="101"
  height="101"
  :preview="false"
  :src="meImg"
></a-image>

const meImg = new URL('@/assets/public/static/helpImg/m.png', import.meta.url).href