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

Posted 2023-02-16

【中文标题】在Vue中添加外部配置文件进行部署？

【英文标题】：Add an external configuration file in Vue for deployment?

【发布时间】：2021-10-03 08:53:26

【问题描述】：

我必须调用 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>

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

【问题讨论】：

我认为 .env 文件是解决方案，只需确保将他添加到您的 .gitignore 中，更多详细信息请查看 officiel doc

【参考方案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")
  )

【讨论】：

我遇到了一个问题，在上面的提取代码中它说“BASE_URL”未定义，而第四行 $config 未使用。在我的 Vue 组件中，当我使用 fetch(this.$config.API_URL) 时，它说 API_URL 是一个未解析的变量。我必须在其他地方定义它吗？

你在使用 TypeScript 吗？这是 Vue CLI 项目吗？听起来像是来自 Vetur/ESLint 的错误，而不是实际的运行时错误...