Vite构建后背景图片URL失效，如何在构建时修改路径？

以下是几种在构建阶段修改背景图片URL路径的可行方案：

• 方法1：配置Vite的base基准路径
  如果项目部署在子路径下，或需要统一资源路径前缀，在vite.config.js中设置base参数，Vite会自动替换所有资源（包括CSS背景图）的路径基准：

export default defineConfig({
  base: './', // 根据部署需求调整，比如 '/project-name/'
})

• 方法2：改用相对路径编写SCSS
  将SCSS中的绝对路径改为相对当前样式文件的路径，Vite会自动处理资源复制和路径替换。例如：
  SCSS文件路径：src/styles/main.scss，图片路径：src/images/subscribe-bg.png，则写法改为：

background: url("../images/subscribe-bg.png") no-repeat bottom right;

• 方法3：用PostCSS插件批量替换路径
  若必须保留原始绝对路径写法，可借助postcss-url插件在构建阶段替换路径：

1. 安装依赖：

npm install postcss-url --save-dev

2. 在vite.config.js中配置PostCSS：

import postcssUrl from 'postcss-url';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postcssUrl({
          url: (asset) => {
            // 根据dist目录结构替换路径，比如将"/images/"改为"/assets/images/"
            if (asset.url.startsWith('/images/')) {
              return `/assets${asset.url}`;
            }
            return asset.url;
          }
        })
      ]
    }
  }
})

• 方法4：配置assetsInclude确保图片被识别
  如果Vite未将图片纳入资源处理流程，添加assetsInclude配置强制匹配图片格式：

export default defineConfig({
  assetsInclude: ['**/*.png', '**/*.jpg', '**/*.svg'] // 按需添加图片格式
})

内容的提问来源于stack exchange，提问作者Anand Paul