How I can set proxy URL from the external config.json file in vue.config.json

You can utilize webpack code splitting with the webpackChunkName comment. This will create a separate chunk, which can then be altered easier after build.

Here is the code to have it available inside a vue component

config.json:

{
  "abc": 123,
  "def": 123
}

vue component:

export default {
  name: 'app',
  data: function () {
    return {
      config: null
    }
  },
  created() {
    import (/* webpackChunkName: "config", webpackMode: "lazy-once" */ "./config.json").then(r => this.config = r.default);
  }
}

outside of component

let config;
import(/* webpackChunkName: "config" */ './config.js')
  .then(r => {config : r.default})
  .then(/* do stuff with config */);

Some things to note: - because it is no longer part of the same bundle, the config bundle will need to come from a network request, which means that the response is asynchronous, so you cannot do a simple assignment. This may require less-than-trivial change to your code, as you won't be able to use the value before it is loaded, so any other code that relies on it will need to wait. - whether you use json, or js file in source, the resulting webpack bundle will be a js file and will be almost the same, though the json version is slightly smaller

the config bundle will look something like this

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["config"],{"7dc5":function(n){n.exports={abc:123,def:123}}}]);
//# sourceMappingURL=config.26910bd8.js.map

where {abc:123,def:123} is the data part that should be easy to modify now

resources:

• webpack code splitting documentation: https://webpack.js.org/guides/code-splitting/
• lazy-loading, showing the feature in vue https://router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk