publicPath malformed for assets imported through CSS

[nklayman]

Version

5.0.0-alpha.7

Reproduction link

https://github.com/SnosMe/font-loading-bug

Environment info

Environment Info:

  System:
    OS: Linux 5.8 Ubuntu 20.10 (Groovy Gorilla)
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
  Binaries:
    Node: 14.4.0 - /tmp/fnm_multishell_1284112_1615510932578/bin/node
    Yarn: 1.22.10 - /tmp/fnm_multishell_1284112_1615510932578/bin/yarn
    npm: 7.5.3 - /tmp/fnm_multishell_1284112_1615510932578/bin/npm
  Browsers:
    Chrome: 89.0.4389.82
    Firefox: 86.0
  npmPackages:
    @vue/cli-overlay:  4.5.11 
    @vue/cli-plugin-router:  4.5.11 
    @vue/cli-plugin-vuex:  4.5.11 
    @vue/cli-service: ^4.0.0 => 4.5.11 
    @vue/cli-shared-utils:  4.5.11 
    @vue/compiler-core:  3.0.7 
    @vue/compiler-dom:  3.0.7 
    @vue/compiler-sfc: ^3.0.4 => 3.0.7 
    @vue/compiler-ssr:  3.0.7 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.7 
    @vue/runtime-core:  3.0.7 
    @vue/runtime-dom:  3.0.7 
    @vue/shared:  3.0.7 
    @vue/web-component-wrapper:  1.3.0 
    vue: ^3.0.4 => 3.0.7 
    vue-cli-plugin-electron-builder: 2.0.0-rc.6 => 2.0.0-rc.6 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.6 (16.1.2)
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Run yarn electron:build --dir and launch executable in dist_electron/[PLATFORM]-unpacked/font-loading-bug(.exe). Open devtools console and see that the font failed to load because the request URL was app://fonts/... instead of app://./fonts/....

What is expected?

The publicPath is set to app://./, so the font should be requested at app://./fonts/....

What is actually happening?

The ./ is removed and it is loaded from app://fonts/....

---

nklayman/vue-cli-plugin-electron-builder#1286

[Alecyrus]

Any update? @sodatea

[fm96-dev]

I have a similar problem. I created a vue project with vue-cli, added the vue.config.js file, and changed publicPath to "https://example.com" (I have to publish the files in a different URL than the URL that serves the index.html).
the js and css paths are generated correctly, but, if I use an image inside the css, it will be resolved as ../img/image.png and not as https://example.com/img/image.png

[ithil]

I'm facing the same problem. Is there any workaround other than downgrading to v4? 🤔

[Alecyrus]

I'm sorry to interrupt, if it's convenient, could you please tell me when you plan to deal with this issue? For this stale problem has existed for a long time... :sad:

[Alecyrus]

I'm sorry to interrupt, if it's convenient, could you please tell me when you plan to deal with this issue? For this stale problem has existed for a long time... :sad:

A workaround, nklayman/vue-cli-plugin-electron-builder#1286 (comment)

[CurrrryChen]

Any update? I have to set images & fonts with a absolute url prefix, but it doesn`t work in css file with the setting below:

const publicPath = process.env.NODE_ENV === 'production' ? '/myApp/':'http://localhost:8080/myApp/';
...
webpackConfig:config => {
  config.module.rule('images').set('generator', { filename: 'img/[hash][ext][query]', publicPath });
  config.module.rule('fonts').set('generator', { filename: 'fonts/[hash][ext][query]', publicPath });
  config.module.rule('svg').set('generator', { filename: 'img/[hash][ext][query]', publicPath });
}
...

paths are start with wrong prefix ../ in css files.