Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
WenyaoL opened this issue Nov 19, 2022 · 2 comments

Comments

@WenyaoL
Copy link

WenyaoL commented Nov 19, 2022

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:
AAA
After packaging:
EEE
console:
BBB
Network:
CCC
DDD

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
Copy link
Collaborator

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
Copy link
Author

WenyaoL commented Nov 20, 2022

in fact:
AAA

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: './':
BBB

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants