Vue js с внешним файлом конфигурации - PullRequest
Новая
       16

Vue js с внешним файлом конфигурации

0 голосов
/ 07 февраля 2020

Мне интересно, можно ли разрешить приложению Vue читать внешний файл конфигурации. Я представляю что-то, в котором я развертываю приложение, отправляю приложение с файлом конфигурации; на этом этапе должна быть возможность изменить конфигурацию во внешнем файле без необходимости перестраивать все приложение. Есть ли способ, которым я могу достичь этого результата? Сейчас я использую отдельное хранилище Vuex, но я не могу изменить конфигурацию без перестройки всего приложения.

Я забыл упомянуть, что проект сделан с Vue CLI.

Ответы [ 2 ]

1 голос
/ 07 февраля 2020

Вы можете получить config.json из папки publi c, а затем загрузить свое приложение Vue в обратный вызов разрешения

Поместить свои конфигурационные ключи в /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")
    })
})

Ваша конфигурация будет загружена во всем приложении. Затем вы можете просто использовать 

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

в ваших Vue компонентах

0 голосов
/ 07 февраля 2020

У меня есть маршрут, обслуживаемый узлом, который возвращает динамически созданные файлы JS и определяет глобальный объект, в котором я храню эту конфигурацию. Ничего, что Vue зависит.

В index.html: 

 <script type="text/javascript" src="config.js"></script>

В node (на стороне сервера): 

  app.get('/config.js', (request, reply) => {
    reply.header('Content-Type', 'application/javascript');
    reply.send(`MyConfig = ${JSON.stringify(config)}`);
  });

В компонентах (или где-нибудь еще): 

{
  data: () => ({
    someField: MyConfig.someField
  })
}
...