Vue Electron项目中静态图片未被Webpack处理的问题求助

问题：Vue组件内路径未被Webpack处理导致404错误 #

我用electron-forge构建了基于Webpack和Vue.js的应用，现在碰到个问题：.vue文件里的<img>标签src属性的图片路径没被转换。比如index.html里的图片路径会被处理成带哈希的命名路径，但example.vue里的路径原样保留，导致图片加载失败，报404错。

原webpack.rules.ts配置如下：

import type { ModuleOptions } from 'webpack'

export const rules: Required<ModuleOptions>['rules'] = [
  // Add support for native node modules
  {
    // We're specifying native_modules in the test because the asset relocator loader generates a
    // "fake" .node file which is really a cjs file.
    test: /native_modules[/\\].+\.node$/,
    use: 'node-loader',
  },
  {
    test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.vue$/,
    use: {
      loader: 'vue-loader',
    }
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
      },
    },
  },
  {
    test: /\.(html)$/, 
    use: {
      loader: "html-loader"
    }
  },
  {
    test: /\.(png|jpe?g|gif|svg)$/i,
    type: 'asset/resource'
  },
  {
    test: /\.(mp3)$/i,
    type: 'asset/resource'
  }
]

问题出在vue-loader缺少配套插件，导致Webpack无法解析Vue组件内部的资源引用。html-loader只处理独立的.html文件，不会处理Vue组件里的模板内容，必须让vue-loader配合专属插件来衔接资源处理规则。

步骤1：安装必要依赖（未安装的话执行） #

npm install vue-loader vue-template-compiler --save-dev

步骤2：修改Webpack配置 #

1. 保留原有webpack.rules.ts规则

你的资源处理规则（图片、音频）和vue-loader基础配置没问题，无需改动。

2. 添加VueLoaderPlugin到Webpack插件列表

找到渲染进程的Webpack配置文件（通常是webpack.renderer.config.ts），引入并添加插件：

import { VueLoaderPlugin } from 'vue-loader';
import type { Configuration } from 'webpack';

export default {
  // 其他已有配置...
  plugins: [
    new VueLoaderPlugin(),
    // 项目原有的其他插件
  ],
} as Configuration;

原理说明 #

• VueLoaderPlugin是vue-loader的必需插件，它会把Vue单文件组件拆分成模板、脚本、样式三个部分，分别交给对应loader处理。其中模板里的<img src>引用会被自动传递给你配置的asset/resource规则，生成带哈希的正确输出路径。
• 原有的图片、音频资源规则无需调整，vue-loader会自动衔接这些规则处理组件内的资源引用。

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