Vue3生产构建后动态生成div的background-image无法访问如何解决

问题根因 #

• 静态CSS中写的url()路径会被Webpack在构建阶段自动解析，转换为生产环境对应的实际资源路径，同时src/assets下的图片会被Webpack处理后输出到构建产物目录。
• JS代码中动态拼接的路径字符串不会被Webpack识别处理，因此生产构建后路径与实际资源输出路径不匹配，导致背景图加载失败。开发环境正常是因为开发服务将所有资源托管在根路径，临时匹配了你写的路径规则。

可直接落地的解决方案 #

方案1：将图片资源放到public目录（最稳妥） #

1. 在项目根目录的public文件夹下创建assets/images目录，把所有动态用到的png图片转移到这个目录下。public目录的资源不会被Webpack编译，会原封不动复制到构建产物根目录。
2. 修改动态背景图设置代码：

div.css(
  "background-image",
  `url(${process.env.BASE_URL}assets/images/${item_name}.png)`
)

process.env.BASE_URL会自动读取你vue.config.js中配置的publicPath，自动适配开发、生产环境的路径规则。

方案2：保留图片在src/assets目录，用require动态引入 #

Webpack支持动态require指定目录下的资源，会自动把匹配到的资源全部打包，拼接正确的访问路径：

// 注意Vue3 + Webpack环境下动态require需要取.default属性
const imgFullPath = require(`@/assets/images/${item_name}.png`).default
div.css(
  "background-image",
  `url(${imgFullPath})`
)

验证调试方法 #

打开生产环境页面F12，找到正常生效的静态背景图backbagstatic.png的实际访问路径，对比动态生成的背景图路径差异，直接对齐路径规则即可快速解决。

内容的提问来源于stack exchange，提问作者Jassem Ben Rayana