Vue cli file-loader with postTransformPublicPath

Hi there. I have an issue loading fonts with a dynamic public path replaced cdn at run time. So I have something like this:

vue.config.js file

chainWebpack: config => {
                emitFile: true,
                name: '[name].[hash].[ext]',
                outputPath: 'staticV2/fonts/',
                publicPath: process.env.NODE_ENV === "production" ? "./#CDN#" : "/",
                postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`

main.js (entry point) file

__webpack_public_path__ = window.cdnHost; // this is set at load time by the server side rendered index.html and works for all other resources like js, svg, png, etc except fonts


@font-face {
  font-family: 'Noto Sans Regular';
  src: local('Noto Sans Regular'), local('NotoSans-Regular'),
  url(~@/design/assets/fonts/NotoSans-Regular.woff2) format('woff2'),
  url(~@/design/assets/fonts/NotoSans-Regular.woff) format('woff');
  font-display: swap;

font-face.css is loaded in App.vue file (root component)

it all works fine in development mode since i set the publicPath: “/” but when i build for production mode, I get a call for the fonts, something like : http://localhost/#CDN#/NotoSans-Regular.36747d3d16c9a73c831cb804fb8b1fab.woff2 as you can see the #CDN# placeholder is not getting replaced as the documentation for file-loader would suggest.

It might not be an vue cli issue … :slight_smile: