生产环境下SVG元素无法显示，疑为Gulp配置问题

生产环境下SVG图片加载失败，本地开发环境完全正常，团队判断问题大概率出在Gulp构建配置上。

相关代码 #

HTML代码 #

<img src="assets/logo.svg" alt="Logo">

Gulp配置文件（gulp.js） #

const gulp = require('gulp');
const inline = require('gulp-inline');
const uglify = require('gulp-uglify');
const minifyCss = require('gulp-minify-css');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function(done) {
gulp.src('../../dist/apps/index.html')
    .pipe(inline({
        base: 'public/',
        js: function() { return uglify(); },
        css: function() { return minifyCss().pipe(autoprefixer()); }
    }))
    .pipe(gulp.dest('../../dist/apps/template'));

done();
});

控制台报错信息 #

报错为 404 Not Found，说明生产环境里SVG文件的路径无法被正确找到。

问题分析 #

1. 构建未同步SVG文件：当前Gulp任务仅处理HTML的内联压缩，未将assets目录下的SVG文件复制到输出目录../../dist/apps/template，导致生产环境缺失对应资源。
2. 基准路径配置错误：inline插件的base: 'public/'配置可能导致资源解析的基准路径偏差，使得HTML中SVG的引用路径与实际文件位置不匹配。
3. 插件默认内联干扰：gulp-inline会尝试自动内联图片资源，处理SVG时可能修改了原路径或导致内联失败，进而引发加载错误。

解决步骤 #

1. 新增SVG文件复制任务 #

在Gulp配置中添加任务，将SVG文件同步到构建输出目录：

gulp.task('copy-svg', function() {
  return gulp.src('../../dist/apps/assets/*.svg')
    .pipe(gulp.dest('../../dist/apps/template/assets'));
});

修改默认任务，让它依赖该复制任务：

gulp.task('default', gulp.series('copy-svg', function(done) {
  gulp.src('../../dist/apps/index.html')
    .pipe(inline({
        base: 'public/',
        js: function() { return uglify(); },
        css: function() { return minifyCss().pipe(autoprefixer()); }
    }))
    .pipe(gulp.dest('../../dist/apps/template'));
  done();
}));

2. 排除SVG的内联处理 #

若无需将SVG内联到HTML中，可在inline配置里忽略SVG文件：

.pipe(inline({
    base: 'public/',
    js: function() { return uglify(); },
    css: function() { return minifyCss().pipe(autoprefixer()); },
    ignore: ['assets/*.svg']
}))

3. 验证路径一致性 #

确认构建后的HTML中SVG的src路径与实际文件存放路径匹配。例如输出目录为template时，SVG需放在template/assets/logo.svg，HTML中的assets/logo.svg相对路径才有效。

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