带有外部配置文件的Vue js [英] Vue js with an external configuration file

问题描述

我想知道是否可以让Vue App读取外部配置文件.我想像一下在其中部署应用程序，并随配置文件一起交付该应用程序.此时，应该可以更改外部文件中的配置，而不必重建整个应用程序.有什么办法可以达到我的目标吗?现在，我正在使用单独的Vuex存储，但是如果不重建整个应用程序，就无法更改配置.

I'm wondering if it is possible to let to a Vue App to read an external configuration file. I imagine something in which I deploy the application, ship the application with the config file; at this point it should be possibile to change the configuration in the external file without having to rebuilt the entire application. Is there someway I can achieve that result? Now I am using a separated Vuex store but i cannot change configuration without rebuilding the entire app.

我忘了提到该项目是使用Vue CLI创建的.

I forgot to mention that the project is made with Vue CLI.

推荐答案

您可以从公用文件夹中获取 config.json ，然后将您的Vue应用加载到resolve回调中

You can fetch config.json from public folder and then load your Vue app in the resolve callback

将配置密钥放置在/public/config.json 文件

{
  "KEY": "value"
}

然后在您的/src/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")
    })
})

您将在应用程序范围内加载配置.然后，您可以使用

You will have your configuration loaded application-wide. You can then just use

mounted() {
  this.$config.KEY // "value"
}

在您的Vue组件中

这篇关于带有外部配置文件的Vue js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！