我必须调用api（json服务器）来检索数据，以便在vue应用程序中填充下拉列表。我不想在应用程序中硬编码，而是想创建一个外部配置文件，在那里我可以放置任何链接，并最终放置服务器详细信息以供部署。目前，我有这个，但由于某种原因，当我在vue组件中引用密钥时，它会说它未定义。我不确定我错在哪里。

/public/config.json

   {
     "API_URL": "localhost:3000"
   }

以下是main.js文件的相关部分：

/main.js

    fetch(process.env.BASE_URL+ "config.json")
    .then((json) => {
    json().then((config) => {
    Vue.prototype.$config = config
    new Vue({
     router,
     store,
     render: (h) => h(App)
   }).$mount("#app")
  })
 })

在我的vue组件中，我试图这样引用它，但它显示为未定义。

<script>
      export default {
      mounted() {
        fetch(this.$config.API_URL)
            .then(res => res.json())
            .then(data => this.mailboxes = data)
            .catch(err => console.log(err.message))
      }
      }

      </script>

如果还有别的办法，请告诉我。