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(... 开头的是否为相对路径,
- 如果是
background:url(../img/checkbox_checked.163ac609.svg)就是正常的,如下图:
- 如果是
app://或者自定义的协议开头,比如background:url(app:///img/btn_xmark_on.36a71635.svg)则需要修改customFileProtocol: './'