在Vue中添加外部配置文件进行部署？

Question

我必须调用 API (json-server) 来检索数据，以便在我的 Vue 应用程序中填充我的下拉菜单。我想创建一个外部配置文件，而不是在应用程序中进行硬编码，我可以在其中放置任何链接并最终放置服务器详细信息以进行部署。目前，我有这个，但由于某种原因，当我在我的 vue 组件中引用 Key 时，它说它未定义。我不确定我哪里出错了。

    /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>

如果有其他方法可以解决这个问题，请告诉我。

Answer 1

如果您希望应用程序构建一次并在具有不同配置的多台服务器上使用相同的包，这是正确的方法。 cmets 中建议的ENV variables 将不起作用，因为这些值已“嵌入”到捆绑包中...

但是您以错误的方式使用fetch。 fetch 返回您尝试调用的 response 而不是调用 response.json()

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