vue-cli-plugin-electron-builder编译应用后图片无法加载的解决办法

vue-cli-plugin-electron-builder通过命令yarn electron:build生成可执行文件之后，启用应用程序，你会发现开发时本来能正常显示的图片，现在都看不到了，如下图。第一感觉肯定是图片路径不对。

解决办法是打开vue.config.js文件，加入如下配置：

pluginOptions: {
    electronBuilder: {
      customFileProtocol: "./",
    },
  },

完整的配置代码可参考这个：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8103,     // 端口号
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = "MyApp";
      return args
    })
  },
  pluginOptions: {
    electronBuilder: {
      customFileProtocol: "./",
    },
  },
})

这时候再build一下，再启动应用程序，图片就可以正常显示了。