Webpack 3静态资源无法找到：Gulp转Webpack+Vue.js新手配置求助

我太懂这种感受了——从Gulp那种“写个任务直接复制文件”的直观流程，跳到Webpack这种全靠配置驱动的工具，光是静态资源这块就够绕半天的！尤其是在Vue组件和SCSS里加载图片、字体，明明配置看起来没问题，服务器就是找不到文件，真的头大。下面我结合你的情况一步步拆解解决：

第一步：先把Webpack配置的核心点补对 #

你提到用的是webpack.renderer.config.js，应该是Electron+Vue的项目对吧？先确保配置里这几个关键项没出错：

1. 路径别名（@）要配置正确 #

很多人踩坑是因为@指向没设对，导致组件里的路径解析失败：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      // 这里要根据你的项目实际src目录调整，比如我假设你的渲染进程代码在src/renderer下
      '@': path.resolve(__dirname, 'src/renderer')
    }
  },
  // ...其他配置
}

2. 静态资源用Webpack 5的Asset Modules（替代旧的file-loader） #

Webpack 5之后不用再装额外的loader了，直接用内置的Asset Modules处理图片、字体：

module.exports = {
  output: {
    // 重点！Electron本地加载必须用相对路径，绝对路径会找不到文件
    publicPath: './',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist/renderer')
  },
  module: {
    rules: [
      // 处理SCSS（开发环境用style-loader，生产环境可以换MiniCssExtractPlugin）
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      // 处理图片、字体等静态资源
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          // 打包后资源输出到dist/renderer/assets下，方便统一管理
          filename: 'assets/[hash][ext][query]'
        }
      }
    ]
  },
  // ...其他Vue相关配置（比如vue-loader）
}

第二步：组件和SCSS里的正确写法 #

配置对了，还要确保调用方式没错：

在Vue组件里加载图片 #

有两种靠谱的写法：

<template>
  <div class="demo">
    <!-- 方式1：直接用require绑定 -->
    <img :src="require('@/assets/img/logo.png')" alt="logo">
    <!-- 方式2：先导入再绑定（更适合需要动态切换的场景） -->
    <img :src="bgImg" alt="背景图">
  </div>
</template>

<script>
// 提前导入图片资源
import bgImg from '@/assets/img/bg.png'

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

在SCSS里加载图片/字体 #

注意要加~前缀让Webpack识别别名：

.demo {
  // 加载背景图
  background: url('~@/assets/img/bg.png') no-repeat center/cover;
  // 使用自定义字体
  font-family: 'MyCustomFont';
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('~@/assets/fonts/MyCustomFont.ttf') format('truetype');
}

第三步：排查常见坑 #

如果还是不行，按这几步查：

• 看打包后的dist/renderer目录里有没有assets文件夹，里面有没有你的图片/字体——如果没有，说明Webpack没把这些资源加入打包流程，检查配置里的test规则有没有覆盖到文件后缀
• 打开Electron的开发者工具，看网络请求里资源的路径是不是正确：比如是不是请求了http://localhost:xxx/assets/xxx.png，而实际文件在dist/renderer/assets/xxx.png——如果路径不对，检查output.publicPath是不是设成了相对路径./
• 确认@别名的路径是绝对路径（必须用path.resolve，不能写相对路径）

刚转Webpack的时候确实容易在路径和配置逻辑上踩坑，慢慢来，把每一项配置对应到实际的打包流程，很快就能摸透啦！

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