vite显式URL引入的文件，在style中通过v-bind使用，build后无法被正确加载

[ifrvn]

仔细测了下，这是可以复现的case： 直接替换Home.vue

<template>
  <div class="bg">{{ logo }}</div>
</template>

<script lang=ts>
import { defineComponent } from 'vue'
import logoUrl from '../assets/logo.png?url' // <--- ?url

export default defineComponent({
  setup() {
    return {
      logo: `url(${logoUrl})` // <---
    }
  }
})
</script>

<style scoped>
.bg {
  width: 255px;
  height: 255px;
  background: v-bind(logo) no-repeat; // <---
  background-size: cover;
  background-position: top left;
}
</style>

npm run dev测试正常，build:dir后运行build/win-unpacked/{project-name}.exe，发现图片无法加载

style里的url是 file:///D:/dev/electron-vue-next-test/build/win-unpacked/resources/app.asar/renderer/assets\/logo\.03d6d6da\.png

network中看到请求的url是 file:///D:/dev/electron-vue-next-test/build/win-unpacked/resources/app.asar/renderer/assets/assets/logo.03d6d6da.png

大佬分析下什么原因，这给我整不会了

[ifrvn]

我知道了，编译后的index.css在assets目录下，.bg的代码都在index.css，加载的时候background: url(xxx)就以assets为根路径，请求的是assets/xxx。

所以改成url(../${logoUrl})就可以了