When packaging, the value passed in by the url () function in css points to the wrong path.

[WenyaoL]

Describe the bug When packaging, the value passed in by the url () function in css points to the wrong path.

To Reproduce The reproduction operation is very simple. I use the url () function in css to reference files. When packaging, the function path starts from '/', not './'. In fact, when the path is'/', static resources cannot be obtained. CSS file： After packaging： console: Network:

Expected behavior background-image: url(../icon.png); -----> background-image:url(app:///img/icon.d957157f.png); I want to: background-image: url(../icon.png); -----> background-image:url(app://./img/icon.d957157f.png);

Environment (please complete the following information):

{
  "name": "electron-demo-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "electron": "13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-cli-plugin-electron-builder": "^2.1.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

[MatthijsBurgh]

Please check https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#handling-static-assets. This is the only thing I can do for now.

[WenyaoL]

in fact：

I found that configuring customFileProtocol: './' can solve this problem.The packaged path will match the current file path.

//in vue.config.js
pluginOptions:{
    electronBuilder: {
      customFileProtocol: './'
    }
}

After configuring customFileProtocol: './'：

I wonder why "./" must be added after the protocol in path matching. For example: app://./index.html , not app://index.html (Unable to find resource).

If customFileProtocol is not configured, the url() function will go "/". That is, the path will be resolved to app://img/icon.75ahw75f1.png , but static resources cannot be obtained. <img alt="Vue logo" src="./assets/icon.png"> can operate normally