3

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!

Forget-me-not
  • 31
  • 1
  • 3

1 Answers1

3

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

Linus Borg
  • 23,622
  • 7
  • 63
  • 50
  • This works on the client side but I can't figure out how to get the server side working, any ideas? – Damian May 28 '19 at 14:07
  • 1
    I'm not sure what you are referring to as "the server side", especially since you are not OP and I know nothing about your situation. – Linus Borg May 29 '19 at 22:04
  • 1
    I have the same problem that I can't figure out how to solve. Your solution works for me only when i access my vue application on dev enviornment - when i use 'npm run serve' using vue-cli. But when i build my vue project, and serves the index.html file using spring boot server, the dynamic public path does not work at all. For example, I need to access the asset files from /instance1/assets, and to access /instance2/assets from the same compiled vue project. But it doesnt work when serving the index.html from spring boot server. – Omri Shayo Jan 26 '21 at 14:12
  • Changing `__webpack_public_path__` at runtime may be not enough. If you are interested, you can read my take on this problem [here](https://stackoverflow.com/a/65924415/381282) – Michal Levý Jan 28 '21 at 14:56