修复vue-cli-plugin-electron-builder 打包后 css 中引用图片打包后无法显示问题,开发环境没有问题

721 阅读1分钟

vue-cli-plugin-electron-builder 打包后 css 中引用图片打包后无法显示问题,开发环境没有问题

解决方案:

vue.config.js

module.exports = defineConfig({
    pluginOptions: {
        electronBuilder: {
          customFileProtocol: './',
        }
    }
})

原因是css 背景图片,打包后会被打包成 app://img/xxx.xxx.svg 等方式,但是electron要求的是 app://./img/xxx.xxx.svg 方式,故需要设置 customFileProtocol: './'

也可以通过 dist_electron/bundled/css/ 目录下的css文件查看 background:url(... 开头的是否为相对路径,

  1. 如果是 background:url(../img/checkbox_checked.163ac609.svg) 就是正常的,如下图:

image.png

  1. 如果是 app:// 或者自定义的协议开头,比如 background:url(app:///img/btn_xmark_on.36a71635.svg) 则需要修改 customFileProtocol: './'

image.png