Quasar构建未打包JS设置的背景图资源，打包后404问题如何解决？

问题原因 #

直接硬编码/src/assets/sascha-duensing-182.jpg路径时，Quasar的构建工具（Vite/Webpack）无法识别这个资源引用，不会将图片打包到dist目录中。本地开发时src目录存在所以能正常访问，但构建后该路径下的资源不存在，导致404错误。

解决方法 #

方法1：通过import/require让构建工具追踪资源

使用Quasar配置的@别名指向src目录，通过ES模块import或CommonJS require引入图片，构建工具会自动处理资源并返回正确的构建后路径：

// 使用import（Vite/Webpack通用）
import backdropImage from '@/assets/sascha-duensing-182.jpg';
const stages_backdrop_A = document.getElementById("stages_backdrop_A");
stages_backdrop_A.style.backgroundImage = `url(${backdropImage})`;

// 使用require（Webpack环境）
const backdropImage = require('@/assets/sascha-duensing-182.jpg');
const stages_backdrop_A = document.getElementById("stages_backdrop_A");
// ES模块环境下需添加.default
stages_backdrop_A.style.backgroundImage = `url(${backdropImage.default})`;

方法2：Vue组件内使用绑定样式（更符合Vue规范）

如果是在Vue组件中，推荐使用:style绑定的方式，避免直接操作DOM：

<template>
  <div id="stages_backdrop_A" :style="{ backgroundImage: `url(${backdropImage})` }"></div>
</template>

<script>
import backdropImage from '@/assets/sascha-duensing-182.jpg';

export default {
  data() {
    return {
      backdropImage
    };
  }
};
</script>

方法3：将图片放入public目录

如果需要保持静态路径引用，把图片移动到项目根目录的public/assets文件夹下，然后修改路径为根相对路径：

const stages_backdrop_A = document.getElementById("stages_backdrop_A");
stages_backdrop_A.style.backgroundImage = "url('/assets/sascha-duensing-182.jpg')";

Quasar构建时会将public目录下的资源原封不动复制到dist根目录，这样就能正常访问。

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