How to get `webpack.config.js` or `vue.config.js` file data globally in VueCLI 3

Question

I'm working on a project which develop by VueCLI 3.0. I've Created a config file in the root and named as vue.config.js. I've defined my custom configuration. but every time I've to load this file in every component file to use it. Is there any way or option to get globally in every js file and component.

I'm newbie in VueCli.

Here, is my vue.config.js file :-

// vue.config.js
module.exports = {
      api : {
          server: 'http//:192.168.0.1'
      }
  }

In my App.vue - I want to access this way.

<script>
export default{
  mounted(){
    console.log(api.server)
  }
}
</script>

Please help me out and give suggestions

please refer [this](https://stackoverflow.com/questions/50828904/using-environment-variables-with-vue-js) — PRAJIN PRAKASH, Mar 18 '20 at 07:41
actually this `vue.config.js ` is consumed by `vu-cli-service` it does't have any reference inside `vue`, If you want make it simpler do [this](https://stackoverflow.com/questions/43193409/global-data-with-vuejs-2) — PRAJIN PRAKASH, Mar 18 '20 at 12:15

score 0 · Answer 1 · answered Mar 18 '20 at 07:37

0

It not recommend to use data in vue.config.js directly. If you have some variables based on environment, use Modes and Environment Variables.

answered Mar 18 '20 at 07:37

Zmen Hu

795
3
12

Except `ENV` other variables how can i get them. – Gabrielle-M Mar 18 '20 at 08:27

PRAJIN PRAKASH · Answer 2 · 2020-03-18T12:40:57.693

0

Its not recommended method even if you need to do that just try this.

import vueconfig from "./../vue.config.js";
new Vue({
    data:{
        config
    }
})

one thing you remember that we can't define custom data in vue.config.js see this , If you want custom config rename the file.

edited Mar 18 '20 at 12:40

answered Mar 18 '20 at 12:27

PRAJIN PRAKASH

1,366
1
15
31

How to get `webpack.config.js` or `vue.config.js` file data globally in VueCLI 3

2 Answers2