How to use __webpack_public_path__ with vue

Hello, i have a project that requires using dynamic public paths to get assets.
I have read in a few places about webpack variable - __webpack_public_path__ that allows you to set the public path at runtime. But whenever i try to use this __webpack_public_path__ when i run my project using vue-cli-service (npm run serve), it throws an error __webpack_public_path__ is undefined and i cant figure out a way to use it in my vue project.

configuration details:
I am using a vue.config.js file, without webpack.config.js file

I would like to know if anyone has a solution to my problem. Thank You!

Well you have to set this vairable to some value, it doesn’t exist before you set it:

I tried to set the public path in the vue.config.js file and then set it in the main.js but I still get the same error.

// vue.config.js: 
module.exports = {
    publicPath: '/shopping-cart/'
// public-path.js: 
export default __webpack_public_path__ = '/other/';
// main.js
import './public-path';
import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import router from "./router";

new Vue({
  el: "#app",
  render: h => h(App)

and the error i get is __webpack_public_path__' is not defined

I used an external file to set the __webpack_public_path__ variable so it will be called before the vue instance gets build

I would love to get some extra help, thank you!

We do more or less the same for dynamically setting public path when vue-cli bundles as a library:

The webpack_public_path does not work for me. I will explain why.

Even if you replace that variable’s value, Webpack still injects all the compile-time urls into the html files.
In my index.html, it looks like this:

<link href="/internalurl/js/0.js" rel="prefetch"><link href="/internalurl/js/1.js" rel="prefetch"><link href="/internalurl/js/10.js" rel="prefetch"><link href="/internalurl/js/11.js" rel="prefetch"><link href="/internalurl/js/12.js" rel="prefetch"><link href="/internalurl/js/13.js" rel="prefetch"><link href="/internalurl/js/14.js" rel="prefetch"><link href="/internalurl/js/2.js" rel="prefetch"><link href="/internalurl/js/3.js" rel="prefetch"><link href="/internalurl/js/4.js" rel="prefetch"><link href="/internalurl/js/5.js" rel="prefetch"><link href="/internalurl/js/6.js" rel="prefetch"><link href="/internalurl/js/7.js" rel="prefetch"><link href="/internalurl/js/8.js" rel="prefetch"><link href="/internalurl/js/9.js" rel="prefetch"><link href="/internalurl/js/chunk-vendors.js" rel="preload" as="script"><link href="/internalurl/js/index.js" rel="preload" as="script"></head>

where internalurl is what I want to replace.

It’s simply not possible to configure the baseUrl at runtime.
Webpack is a compile-time tool.

That’s my experience, anyway.

Relative Path approach was also not working for me, i ended up with a script for the nginx container to replace path string in index.html.