如何在 VueCLI 3 中全局获取`webpack.config.js` 或 `vue.config.js` 文件数据

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

Answer 1

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

Answer 2

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.