vite 生产环境动态背景图找不到，开发环境可以

Question

vue3 + vite 动态引入图片后，本地没问题，打包后找不到图片 ，路径上会出现undefined ，开发时候是正常的
这是一个公共组件 ，具体的图片会通过 url 作为参数传递，打包后图片不显示 ，图片也没有被打包，vite的配置在下面
组件中：

<template>
    <span class="bg-title " :style="{'background-image':background}"></span>
</template>

<script lang="ts" setup>
    let proxy  = defineProps(['url']);
    let background = `url(${new URL(`../assets/title/${proxy.url}.png`, import.meta.url).href})`
</script>

打包后

<span class="bg-title" data-v-6aced22b="" data-v-86f2069b="" style="background-image: url(/assets/title/undefined);"></span>

下面是vite配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  server: {
    host: "localhost",
    cors: true,
    open: true, //vite项目启动时自动打开浏览器
    hmr: true, //开启热更新
  },
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"], // 需要自动引入api的库
      dts: resolve(__dirname, "src/auto-import.d.ts"), //可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts' ,注意:这里配置之后会在启动之后多次编译，具体原因无法找到，可以选择注释掉，不影响使用
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  build: {
    outDir: 'southScreen',
    // minify:'terser',//esbuild
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    // chunkSizeWarningLimit: 1500,大文件报警阈值设置,不建议使用
    rollupOptions: {
      output: { //静态资源分类打包
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) { //静态资源分拆打包
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
      "@assets": resolve("src/assets"),
      "@components": resolve("src/components"),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/style.scss" as *;`,
      },
    },
  },
});

Answer 1

let background = url(${new URL(../assets/title/${proxy.url}.png, import.meta.url).href})
你整个是反引号嵌套吗？ 可以打印下background 的值看下