Is this possible to configure publicPath in vue-cli dynamically in runtime?

Question

Is this possible to change dynamically publicPath for vue application (in vue.config)? This means that I want to set public path be dynamically depends on real url(some domain), e.g. i want to make only one build, but use it for staging and prod env (and use different cdn-s for assets in different countries, etc). I find that webpack_public_path aims at setting at runtime the public path. But how can I use webpack_public_path with vueJS(vue-cli)?

webpack_public_path - didn't work for me. Maybe someone can provide a real example in repo?

Expected result: if I build once app in "production" mode, deploy (artifact) app in several environments, each environment setting his own publicPath at runtime (cdn). E.g. for prod artifact on domain test.com in Europe - used cdn: test-cdn-europe.com, for test.ua - is used another-test-cdn.ua and so on. But I want change this publicPath in vue.config in runtime (maybe base on current domain or something like that). So I can make only one build (because it can take too much time - to make several builds).

Can you suggest any ideas to solve this problem? Thanks!

Answer 1

You can assign a new value to __webpack_public_path__, but you have to do so before the app itself starts.

So best would be to put this into its own file and import it before Vue itself:

import './publicpath'
import Vue from 'vue'

then in publicpath.jsyou would do something like this:

__webpack_public_path__ = window.your_public_path

You could of course also use window.location to get the domain or other things